gpt4 book ai didi

coordinates - 捕捉 Svg 边界框和变换坐标

转载 作者:行者123 更新时间:2023-12-04 03:09:38 27 4
gpt4 key购买 nike

我不知道如何放置一个相对于其同级路径边界框的路径。想象一个像窗口一样的盒子,我想在它的右上角放一个关闭按钮。这是在变换窗口(缩放 3 倍)后组合在一起的框和关闭按钮:

<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>

我只是在将框(动画回调)动态转换为 group24 组后附加按钮,关闭按钮如下所示:

Close button appears not in top left of group24

然后当我得到组中 path24 元素的边界框并尝试将关闭按钮定位到右上角时:

var p = this.SvgButton.select("path");
var bbox = myBox.getBBox();
var coordString = (bbox.x2 - 10) + " " + (bbox.y);
p.transform("T" + coordString);

坐标总是错的。如何将关闭按钮定位到浅绿色框的右上角?

这里有一个我正在努力实现的例子:http://jsfiddle.net/savpm8w3/1/ 请注意,缩放动画在 jsfiddle 中不起作用,这就是 fiddle 中的示例起作用的原因。

最佳答案

我已经设法通过向 Snap.Svg 添加一个插件来解决这个问题,该插件相对于其他 Snap 对象的边界框定位元素。它可以进一步工作以提供更多的转换类型。如果有人对这里的代码感兴趣:

    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);
};
});

关于coordinates - 捕捉 Svg 边界框和变换坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25906388/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com