I am trying to animate a group of svg element which have previously been translated to a new position . I am using Velocity.js to animate the group to the center of viewport.
However i am struggling to animate the group to the center of the viewport.
The attached jsfiddle and velocity function below shows that the group is animated from the top left to the right of the view port ,which is not what I want.
How can I animate the group from the new position to the center of the screen?
function Customize()
{
var bound=document.getElementById('parentsvg');
var width = (bound.width.baseVal.value);
var height = bound.height.baseVal.value;
var dx= (width/2);
var dy= (height/2);
var gro = document.getElementById('group');
var cl = gro.getBoundingClientRect();
var width = (cl.width / 2) ;
var height = (cl.height / 2);
var xx = dx - width;
var yy = dy - height;
Velocity(gro,{translateX:xx,translateY:yy},{duration:5000},{queue:false});
}
Here is my Jsfiddle
http://jsfiddle.net/KashifMKH/kd0s27vq/3/
Related
I have a project on svg-edit where i have to create polygon on mouse-click , the svg-canvas (not HTML5 canvas suppose as drawing board) is zoomable, i can create polygon on 100% zoom but when i zoomin or zoomout i can't, actually i am unable to get right x and y position after zoom.as you can see in image.
I had tried this method to get points--
//Container 1440*1920
var svgcanvas = document.getElementById("svgcanvas");
//zoom
var initialZoom = 1440 * 1920;
zoomWidth = parseFloat(svgcanvas.style.width);
zoomHeight = parseFloat(svgcanvas.style.height);
currentZoom = zoomHeight * zoomWidth;
zoom = currentZoom / initialZoom;
//points
var rect = event.target.getBoundingClientRect();
var x1 = ((event.clientX) / zoom) - rect.left;
var y1 = ((eevent.clientY) / zoom) - rect.top;
and my task is
It seems you are not interacting with the svg-edit API at all. Things get much easier if you do.
// do not interact with the DOM element, but with the API object
var svgcanvas = svgEditor.canvas;
// your event listener function
function listener (event) {
var rect = svgcanvas.getBBox(event.target);
var x1 = rect.x;
var y = rect.y;
...
}
No need to handle zooming; the SvgCanvas instance does that for you.
How can I delay the size of the image after scrolling 300 from the top.
Is it possible to do with var.
I am not sure how to delay it so it animates when a certain distance from the top.
I'm using this script:
Img001Size = function () {
// Get the real width of the logo image
var theImg1 = $("#theImg1");
var newImage = new Image();
newImage.src = theImg1.attr("src");
var imgWidth = newImage.width;
// distance over which zoom effect takes place
var maxScrollDistance = 1300;
// set to window height if larger
maxScrollDistance = Math.min(maxScrollDistance, $(window).height());
// width at maximum zoom out (i.e. when window has scrolled maxScrollDistance)
var widthAtMax = 500;
// calculate diff and how many pixels to zoom per pixel scrolled
var widthDiff = imgWidth - widthAtMax;
var pixelsPerScroll =(widthDiff / maxScrollDistance);
$(window).scroll(function () {
// the currently scrolled-to position - max-out at maxScrollDistance
var scrollTopPos = Math.min($(document).scrollTop(), maxScrollDistance);
// how many pixels to adjust by
var scrollChangePx = Math.floor(scrollTopPos * pixelsPerScroll);
// calculate the new width
var zoomedWidth = imgWidth - scrollChangePx;
// set the width
$('.Img001').css('width', zoomedWidth);
});
}
Img001Size();
I have a list of photos in my webpage, I need to fire a jquery event when a photo is on a particular position (view port)
How do I achieve this?
var rect = document.getElementbyID('myId').getBoundingClientRect();
// You can access the rect attributes by using the code below, this gives you cordinates as per the view port.
var t = rect.top
var l = rect.left
var width = rect.width;
var height = rect.height;
// if you need the coordinates as per the absolute screen then you can do somehting like this
var left = l + window.screenX;
var top = t + window.screenY + (window.outerHeight - window.innerHeight);
var right = left + width;
var bottom = top + height;
I'm trying to draw an image using drawImage(), but with a matrix transform applied to it, like rotation or skew. Is there some way to get the expected bounds of this transformed image?
Given a rectangle's x,y,width,height,rAngle,skewX,skewY:
The bounding box of a rotated rectangle:
// rAngle is in radians
var absCos=Math.abs(Math.cos(rAngle));
var absSin=Math.abs(Math.sin(rAngle));
var centerX=x+width/2*Math.cos(rAngle)-height/2*Math.sin(rAngle);
var centerY=y+width/2*Math.sin(rAngle)+height/2*Math.cos(rAngle);
var newWidth=width*absCos+height*absSin;
var newHeight=width*absSin+height*absCos;
The bounding box of a skewed rectangle:
// skewX & skewY are in the range 0.00 to 1.00
var left = x * (1+skewX);
var top = y * (1+skewY);
var newWidth = width * (1+skewX);
var newHeight = height * (1+skewY);
i would like to retrieve the element offset starting from his own x center coordinates.
how can i do it?
Actually i can find the window offset of an element but it retrieves the coordinates from the border of the element like this:
var _position = $(this).offset();
You have to use offset() to get the top and left position, then add half of the height() and width() values to them. That gives the center coordinates.
var $this = $(this);
var offset = $this.offset();
var width = $this.width();
var height = $this.height();
var centerX = offset.left + width / 2;
var centerY = offset.top + height / 2;
If you need to consider the padding property in your calculations, use the following:
var width = $this.outerWidth();
var height = $this.outerHeight();
This can now be done through native Javascript also:
let centerX = targetNode.offsetLeft + targetNode.offsetWidth / 2;
let centerY = targetNode.offsetTop + targetNode.offsetHeight / 2;
where targetNode is the element you want to get its center coordinates.