I have an SVG image which is made up to multiple polygons. When I click on any of the polygons then that polygon will come up in the center after moving the whole SVG image automatically.
I have tried tweenmax library for this and here is the code snippet :
jQuery('[data-name^="retailer_"]').on('click', function (event) {
var ActiveFloorValue = jQuery('#mapit-floors-filters a.active').attr('data-floor-index');
jQuery('polygon').attr("class","");
var map_store_name = jQuery(this).data('name');
jQuery('#mapit-floor-'+ActiveFloorValue+ ' svg').attr('id','svg-'+ActiveFloorValue);
var main1x = document.getElementById('mapit-floor-'+ActiveFloorValue);
TweenLite.to( main1x, 0, { ease: Linear.easeOut, clearProps:"scale"});
TweenMax.to(main1x, 1.5, {
scale: 1.9,
x:-event.clientX/2 ,
y:-event.clientY/2 ,
ease:Linear.easeOut,
transformOrigin:"center center"
})
});
So please help me to make it possible. I hope you understand my question.
Thanks in advance.
Related
It is straightforward to add an opacity slider for a raster layer using this line of code:
layer.setOpacity(this.value) to lyr_MyMapImage.setOpacity(this.value)
But this is untidy as the slider is located above the map.
How can I insert a slider (horizontal or vertical) onto the map to control the opacity of the layer so that it looks similar to the other map controls? Is there a plugin?
Thanks.
you can use jQuery slider. Example below:
$("#sliderLayer").slider({
min: 0,
max: 100,
value: 100,
slide: function(event, e) {
lyr_MyMapImage.setOpacity(e.value / 100);
},
disabled: true
});
Also, here is jsFiddle:
https://jsfiddle.net/Svinjica/L7edtgx3/19/
Hope it helps:)
In my jsfiddle I position the slider inside a proper openlayers custom control:
const sliderita = document.createElement('div');
sliderita.className = 'ol-control ol-unselectable slider';
sliderita.innerHTML = '<div id="sliderOSM"> <div id="custom-handle" class="ui-slider-handle"></div></div>';
map.addControl(new ol.control.Control({element: sliderita}));
https://jsfiddle.net/5w6sahx4/5/
I've created a line animation with RaphaelJS (see jsfiddle here - http://jsfiddle.net/7n040zdu/). I'm attempting to create a animation that occurs after this one takes place that is basically an erasing of the initial animation. That is, the line animated out the same way that it is animated in - along the same path, the same duration, the same direction.
I have tried just animating another path on top, but that solution is not preferable. If the initial path overlaps itself, then erasing with another path would reveal that the animation is not 'erasing' but rather being overlapped.
I am having trouble finding something in the Raphael documentation that would achieve anything similar to this.
Relevant code below:
HTML
<body>
<div class='drawings' id="draw0"></div>
</body>
CSS
body {
background-color: black;
}
JS
var animateLine = function(canvas, colorNumber, strokeWidth, pathString) {
var line = canvas.path(pathString).attr({
stroke: colorNumber
});
var length = line.getTotalLength();
$('path[fill*="none"]').animate({
'to' : 1
}, {
duration: 1000,
step: function (pos, fx) {
var offset = length * fx.pos;
var subpath = line.getSubpath(0, offset);
canvas.clear();
canvas.path(subpath).attr({
stroke: colorNumber,
"stroke-dasharray" : "",
"stroke-width" : strokeWidth
});
}
});
}
var canvas = new Raphael('draw0', 50,50);
var drawPath1 = 'M0.767,0.915 M48.538,20.228L0.767,0.915l3.896,39.312L48.538,20.228L37.663';
animateLine(canvas, '#FFF', '1.5', drawPath1);
Based on #Ian's comment on the original question, I was able to use a single path and then animate the dashoffset of the svg, but it took some further changing in order to get that actually working correctly.
Initially, the SVG path's css is set with the following parameters: 'stroke-dasharray': '9999px' and 'stroke-dashoffset': '9999px'. The stroke-dashoffset is then animated from 9999px to 9999px minus the length of the path. At the end of the initial animation, the css has to be set once again, this time: 'stroke-dasharray': '999 999' and 'stroke-dashoffset': '9999px'. At this point, the stroke-dashoffset is animated once again, this time 'stroke-dashoffset': (9999-(length of path)-100)+'px'.
A jsfiddle showing this is present here: http://jsfiddle.net/tim_m/94ze4ajj/
*Note that in the jsfiddle, I've added more paths with varying opacity and time offsets to give the illusion of a fade at the tips of the line animation.
Is there a way one could zoom and pan on a canvas using KineticJS? I found this library kineticjs-viewport, but just wondering if there is any other way of achieving this because this library seems to be using so many extra libraries and am not sure which ones are absolutely necessary to get the job done.
Alternatively, I am even open to the idea of drawing a rectangle around the region of interest and zooming into that one particular area. Any ideas on how to achieve this? A JSFiddle example would be awesome!
You can simply add .setDraggable("draggable") to a layer and you will be able to drag it as long as there is an object under the cursor. You could add a large, transparent rect to make everything draggable. The zoom can be achieved by setting the scale of the layer. In this example I'm controlling it though the mousewheel, but it's simply a function where you pass the amount you want to zoom (positive to zoom in, negative to zoom out). Here is the code:
var stage = new Kinetic.Stage({
container: "canvas",
width: 500,
height: 500
});
var draggableLayer = new Kinetic.Layer();
draggableLayer.setDraggable("draggable");
//a large transparent background to make everything draggable
var background = new Kinetic.Rect({
x: -1000,
y: -1000,
width: 2000,
height: 2000,
fill: "#000000",
opacity: 0
});
draggableLayer.add(background);
//don't mind this, just to create fake elements
var addCircle = function(x, y, r){
draggableLayer.add(new Kinetic.Circle({
x: x*700,
y: y*700,
radius: r*20,
fill: "rgb("+ parseInt(255*r) +",0,0)"
})
);
}
var circles = 300
while (circles) {
addCircle(Math.random(),Math.random(), Math.random())
circles--;
}
var zoom = function(e) {
var zoomAmount = e.wheelDeltaY*0.001;
draggableLayer.setScale(draggableLayer.getScale().x+zoomAmount)
draggableLayer.draw();
}
document.addEventListener("mousewheel", zoom, false)
stage.add(draggableLayer)
http://jsfiddle.net/zAUYd/
Here's a very quick and simple implementation of zooming and panning a layer. If you had more layers which would need to pan and zoom at the same time, I would suggest grouping them and then applying the on("click")s to that group to get the same effect.
http://jsfiddle.net/renyn/56/
If it's not obvious, the light blue squares in the top left are clicked to zoom in and out, and the pink squares in the bottom left are clicked to pan left and right.
Edit: As a note, this could of course be changed to support "mousedown" or other events, and I don't see why the transformations couldn't be implemented as Kinetic.Animations to make them smoother.
this is what i have done so far.. hope it will help you.
http://jsfiddle.net/v1r00z/ZJE7w/
I actually wrote kineticjs-viewport. I'm happy to hear you were interested in it.
It is actually intended for more than merely dragging. It also allows zooming and performance-focused clipping. The things outside of the clip region aren't rendered at all, so you can have great rendering performance even if you have an enormous layer with a ton of objects.
That's the use case I had. For example, a large RTS map which you view via a smaller viewport region -- think Starcraft.
I hope this helps.
As I was working with Kinetic today I found a SO question that might interest you.
I know it would be better as a comment, but I don't have enough rep for that, anyway, I hope that helps.
These answers seems not to work with the KineticJS 5.1.0. These do not work mainly for the signature change of the scale function:
stage.setScale(newscale); --> stage.setScale({x:newscale,y:newscale});
However, the following solution seems to work with the KineticJS 5.1.0:
JSFiddle: http://jsfiddle.net/rpaul/ckwu7u86/3/
Unfortunately, setting state or layer draggable prevents objects not draggable.
Duopixel's zooming solution is good, but I would rather set it for stage level, not layer level.
Her is my solution
var stage = new Kinetic.Stage({
container : 'container',
width: $("#container").width(),
height: $("#container").height(),
});
var layer = new Kinetic.Layer();
//layer.setDraggable("draggable");
var center = { x:stage.getWidth() / 2, y: stage.getHeight() / 2};
var circle = new Kinetic.Circle({
x: center.x-100,
y: center.y,
radius: 50,
fill: 'green',
draggable: true
});
layer.add(circle);
layer.add(circle.clone({x: center.x+100}));
// zoom by scrollong
document.getElementById("container").addEventListener("mousewheel", function(e) {
var zoomAmount = e.wheelDeltaY*0.0001;
stage.setScale(stage.getScale().x+zoomAmount)
stage.draw();
e.preventDefault();
}, false)
// pan by mouse dragging on stage
stage.on("dragstart dragmove", function(e) {window.draggingNode = true;});
stage.on("dragend", function(e) { window.draggingNode = false;});
$("#container").on("mousedown", function(e) {
if (window.draggingNode) return false;
if (e.which==1) {
window.draggingStart = {x: e.pageX, y: e.pageY, stageX: stage.getX(), stageY: stage.getY()};
window.draggingStage = true;
}
});
$("#container").on("mousemove", function(e) {
if (window.draggingNode || !window.draggingStage) return false;
stage.setX(window.draggingStart.stageX+(e.pageX-window.draggingStart.x));
stage.setY(window.draggingStart.stageY+(e.pageY-window.draggingStart.y));
stage.draw();
});
$("#container").on("mouseup", function(e) { window.draggingStage = false } );
stage.add(layer);
http://jsfiddle.net/bighostkim/jsqJ2/
I am animating a circle using Raphael. When the circle is large I get artifacts around the circle when its moving. It seems to be something of a clipping / redraw region issue and wondered if there was a work around?
It seems to be OK in firefox (if a little jerky) and appears very reliably in Chrome. It also is exacerbated by using opacity on the fill property i.e. rgba(255,0,0,0.7)
Here is a jsFiddle showing the issue. Just click around the paper on the right to move the circle.
Code:
var discattr = {
fill: "#666",
stroke: "none",
width: 35
};
var paper = Raphael("svgcontainer", 400, 400);
circle = paper.circle(150, 150, discattr.width, discattr.width).attr({
stroke: "none",
fill: "rgba(255,0,0,0.7)"
});
var coords = []
var animateCircle = function(coords) {
if (!coords.length) return;
var nextCoords = coords.shift()
var move = Raphael.animation(nextCoords, 500, "linear", function() {animateCircle(coords)});
circle.animate(move);
}
$("#svgcontainer").on("mouseup", function(e) {
coords.push({cx: e.pageX, cy: e.pageY})
animateCircle(coords);
});
Buffering is a technique used to prevent animation artifacts (tearing, as JamWaffles points out). If you look at the answer to this Stack Overflow question you'll find information about an SVG setting to turn on buffering, but so far it doesn't appear to be supported by major browsers.
Looking for some advice (example would be great) on dragging and dropping SVGs using RaphaelJS.
I have found how to drag an object created withint Raphael
window.onload = function() {
var R = Raphael("canvas", 500, 500);
var c = R.circle(100, 100, 50).attr({
fill: "hsb(.8, 1, 1)",
stroke: "none",
opacity: .5
});
var start = function () {
...
},
move = function (dx, dy) {
...
},
up = function () {
...
};
c.drag(move, start, up);
};
But I need to be able to adapt this to work with a seperate SVG file(s) so for example
myPage.html has myImage.svg, I need to be able to drag myImage.svg around the 'canvas'.
I'm thinking something like
var c = R.SOMEMETHOD('myImage.svg');
...
c.drag(move, start, up);
For example.
Is there a way to do this and if so, an example would be brilliant!
This magic method doesn't exist in RaphaelJS. But there is a way to accomplish this. You can have a look at the raphael-svg-import project on GitHub which works well for basic svgs
Then, you'll want to use a grouping facility as you cannot use the Set functionnality of RaphaelJS
1 - import your SVG
2 - As you import, mark the elements so they belong to the same group
Enjoy !!