Snap Svg Bounding Box and Transform Coordinates
I can't figure out how to position the path relative to its bounding box. Imagine a window like a window, and I want to position it in the top right corner. Here is the button and close button grouped together after transforming the window (3x scaling):
<g id="group24">
<path id="path24" fill="#00aa00" stroke="#00ff00" stroke-width="4" stroke-miterlimit="10" d="M301,585.08v47h45.834l-0.134-21.8
l12.3-0.2l-1-239H253v216c0,0,22,0.2,22,0c0-41,26-31.357,26-31.357V585.08L301,585.08z" transform="matrix(3,0,0,3,-612,-1003.16)"></path>
<path id="close-button" fill="#B40000" d="M256,232c-13.255,0-24,10.745-24,24s10.745,24,24,24s24-10.745,24-24
S269.255,232,256,232z M265.102,270.277l-8.985-8.984l-8.985,8.985l-4.826-4.829l8.983-8.984l-8.984-8.984l4.829-4.826l8.983,8.982
l8.981-8.983l4.83,4.827l-8.983,8.983l8.984,8.983L265.102,270.277z"></path>
</g>
I just add the button after transforming the window (animated callback) to group24 dynamically and close the button like below:
And after I get the bounding rectangle of the path24 element in the group and try to place the close button in the top right corner:
var p = this.SvgButton.select("path");
var bbox = myBox.getBBox();
var coordString = (bbox.x2 - 10) + " " + (bbox.y);
p.transform("T" + coordString);
coordinates are always wrong. How can I place the close button in the top right corner of the light window?
An example of what I am trying to achieve is given here: http://jsfiddle.net/savpm8w3/1/ Please note that the scaled animation does not work in the jsfiddle and therefore the example in the script works.
+3
source to share
1 answer
I managed to solve the problem by adding a plugin to Snap.Svg that positions elements relative to other bounding boxes of Snap objects. It can be continued to provide more types of transformations. If anyone is interested in the code:
Snap.plugin( function( Snap, Element, Paper, global ) {
Element.prototype.getCenter = function() {
var bbox = this.getBBox();
return {x: bbox.cx, y:bbox.cy};
};
Element.prototype.getSize = function() {
var bbox = this.getBBox();
return {w: bbox.width, h:bbox.height};
};
Element.prototype.getPos = function() {
var bbox = this.getBBox();
return {x: bbox.x, y:bbox.y};
};
Element.prototype.getTransformRelative = function(relativeObj, type, absolute, xadjust, yadjust) {
var movex = 0;
var movey = 0;
switch (type) {
case "center":
var c = relativeObj.getCenter();
var elpos = this.getPos();
var elsize = this.getSize();
var movex = c.x - (elsize.w / 2);
var movey = c.y - (elsize.h / 2);
movex = (elpos.x > movex ? 0 - (elpos.x - movex) : movex - elpos.x);
movey = (elpos.y > movey ? 0 - (elpos.y - movey) : movey - elpos.y);
break;
case "topleft":
var movepos = relativeObj.getPos();
var elpos = this.getPos();
movex = (elpos.x > movepos.x ? 0 - (elpos.x - movepos.x) : movepos.x - elpos.x);
movey = (elpos.y > movepos.y ? 0 - (elpos.y - movepos.y) : movepos.y - elpos.y);
break;
case "bottomleft":
var movepos = relativeObj.getBBox();
var elpos = this.getPos();
movex = (elpos.x > movepos.x ? 0 - (elpos.x - movepos.x) : movepos.x - elpos.x);
movey = (elpos.y > movepos.y2 ? 0 - (elpos.y - movepos.y2) : movepos.y2 - elpos.y);
break;
case "topright":
var movepos = relativeObj.getPos();
var rsize = relativeObj.getSize();
var elsize = this.getSize();
var elpos = this.getPos();
movex = (elpos.x > movepos.x ? 0 - (elpos.x - movepos.x) : movepos.x - elpos.x);
movey = (elpos.y > movepos.y ? 0 - (elpos.y - movepos.y) : movepos.y - elpos.y);
movex += rsize.w - elsize.w;
break;
case "bottomright":
var movepos = relativeObj.getBBox();
var rsize = relativeObj.getSize();
var elsize = this.getSize();
var elpos = this.getPos();
movex = (elpos.x > movepos.x2 ? 0 - (elpos.x - movepos.x2) : movepos.x2 - elpos.x);
movey = (elpos.y > movepos.y2 ? 0 - (elpos.y - movepos.y2) : movepos.y2 - elpos.y);
break;
case "topcenter":
var c = relativeObj.getCenter();
var rpos = relativeObj.getPos();
var elpos = this.getPos();
var elsize = this.getSize();
var movex = c.x - (elsize.w / 2);
movex = (elpos.x > movex ? 0 - (elpos.x - movex) : movex - elpos.x);
movey = (elpos.y > rpos.y ? 0 - (elpos.y - rpos.y) : rpos.y - elpos.y);
break;
case "bottomcenter":
var c = relativeObj.getCenter();
var rpos = relativeObj.getBBox();
var elpos = this.getPos();
var elsize = this.getSize();
var movex = c.x - (elsize.w / 2);
movex = (elpos.x > movex ? 0 - (elpos.x - movex) : movex - elpos.x);
movey = (elpos.y > rpos.y2 ? 0 - (elpos.y - rpos.y2) : rpos.y2 - elpos.y);
break;
case "leftcenter":
var c = relativeObj.getCenter();
var rpos = relativeObj.getPos();
var elpos = this.getPos();
var elsize = this.getSize();
var movey = c.y - (elsize.h / 2);
movex = (elpos.x > rpos.x ? 0 - (elpos.x - rpos.x) : rpos.x - elpos.x);
movey = (elpos.y > movey ? 0 - (elpos.y - movey) : movey - elpos.y);
break;
case "rightcenter":
var c = relativeObj.getCenter();
var rbox = relativeObj.getBBox();
var elpos = this.getPos();
var elsize = this.getSize();
var movey = c.y - (elsize.h / 2);
movex = (elpos.x > rbox.x2 ? 0 - (elpos.x - rbox.x2) : rbox.x2 - elpos.x);
movey = (elpos.y > movey ? 0 - (elpos.y - movey) : movey - elpos.y);
break;
default:
console.log("ERROR: Unknown transform type in getTransformRelative!");
break;
}
if (typeof(xadjust) === 'undefined') xadjust = 0;
if (typeof(yadjust) === 'undefined') yadjust = 0;
movex = movex + xadjust;
movey = movey + yadjust;
return (absolute ? "T"+movex+","+movey : "t"+movex+","+movey);
};
});
+4
source to share