- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我不知道如何放置一个相对于其同级路径边界框的路径。想象一个像窗口一样的盒子,我想在它的右上角放一个关闭按钮。这是在变换窗口(缩放 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 组后附加按钮,关闭按钮如下所示:
然后当我得到组中 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/
在我的项目中,我使用 LocationSearchTable/MKLocalSearch。当用户点击一个项目时,我的添加注释方法在 MapViewController 中被调用: func dropP
我很想知道如何检查字符串是否具有两个坐标的格式,例如: (signed int x,signed int y) 我已经通过搜索找到了一些答案,但我还没有完全理解它们(刚开始使用 C++),我要求一个简
在我正在编写的程序中,我为两个类(坐标和图形)编写了代码,其中一个将另一个作为构造函数参数。当我尝试编译它时,出现以下 Graph.cpp 错误: undefined symbol : “Graph:
我在 OpenGL ES 中绘制变化的条,它有坐标 (x,y,z)。 我想在 Action_Down 上添加一些更改(例如:栏中的颜色)。有 getX(),但此方法返回以像素为单位的 x 坐标,而不是
因为我之前的问题很不清楚,所以我编辑了一下: 我有以下问题: 我想为半径为 r+fcr_size 的空心球体构建一个图案。空心球体的空腔半径应为 r。有了这个图案,我可以在许多不同的球体中心使用它,并
我想使用 Vuforia 检测标记并在其上放置一个 3d 对象。从那时起,我想在我的应用程序中使用 ARKit。我如何知道检测到的标记或 3d 对象的 ARKit 世界变换? 我正在使用相同的 Vie
我有一组纬度/经度坐标,我可以使用它们进行投影,例如 Mollweide 投影。 library(mapproj) set.seed(0) n 180] = my.points$x[my.point
我正在使用 JavaScript 进行视频处理,我做得很好,但我使用的是一种名为 canvasCtx.rect () 的方法,它接收这些参数。 然后我可以从使用 getImageData () 方法绘
我创建了一个新项目作为单 View 应用程序。在 View Controller 中添加了用于将 View 坐标转换为窗口坐标的代码: - (void) dumpFrame { CGRect
简短版本:如何将 SVG 路径添加到 Leaflet map ,以便在 map 坐标更改时(例如缩放更改或滑动时)路径会更新? 长版:你好,我有一个地形image包含建筑轮廓。对图像进行地理校正后,我
我编写了一个代码,使用 astropy 将坐标从地球固定系统转换为惯性坐标系: from astropy import coordinates as coord from astropy import
我的多显示器设置中遇到以下情况: 在此示例中,我希望将窗口精确定位在黄色箭头所示的坐标处。然而,我所拥有的只是 NSView 的坐标,它是跨越整个(更大、更上面)辅助监视器的 NSWindow 的 c
我不知道如何将 Pane 上圆形对象的所有 x 和 y 与鼠标的 x 和 y 进行比较。我正在处理的问题要求我设置它,以便鼠标的二次单击会在放置在其上时删除一个点,我想我可以通过比较圆坐标和鼠标坐标的
我正在尝试将图像中的几个点转换为 OpenCV 中的极坐标。我遇到了名为 cartToPolar 的函数,它会为我的点提供相对于 0,0 作为我的原点的极坐标。但是,我想通过将图像中的另一个点作为原点
是的,我想知道如何检查某个坐标是否在另一个坐标半径内。但这可能是一个很小的差异,因为纬度、经度、半径存储在数据库中,而我们要检查的只是给定的坐标。 示例 数据库表 name | lat
我正在使用带有图层的 map (来自示例): var lonLat = new OpenLayers.LonLat(40.4088576, -86.8576718) .
我在坐标转换方面遇到了一些麻烦。 我在屏幕上有一个已知坐标(x,y)的对象,我想将其转换为世界坐标(x,y,z),因为它会投影在相机的近平面上。 到目前为止,我可以像这样在Z平面上进行投影: var
我有4个足球场点(角点): P1(lat, lon, alt) , P2(lat, lon, alt) , P3(lat, lon, alt) , P4(lat, lon, alt) . 以及球场上的
我有一个交换了纬度和经度位置的 NetCDF 文件。 我通常使用的 Netcdf 的标准方式定义如下: Coordinates: * time (time) datetime64[n
如果 line1 和 lin2 都由 x,y,alpha 定义,其中 x,y 是直线上一点的坐标,alpha 是直线与 x=const 之间的角度,如何找到 line1 和 lin2 相交的点? 我尝
我是一名优秀的程序员,十分优秀!