Question

我有一个用例，其中有一个可在SVG元素上拖动的div。它的便笺贴放在SVG中的各个元素附近，然后我使用canvas.drawImage()对其进行快照。

问题在于它的位置不正确当我开始从左向右拖动它时，它与SVG中的Element的距离开始改变。我将附加几个屏幕截图以澄清情况

位于SVG上的元素：image1.1

绘制后出现在画布上的元素：image1.2

SVG image2.1上的第二个元素位置

第二个元素在绘制后出现在画布上： image2.2

从图1.1和2.1中可以看到，我已经将元素放置在两个不同的条上，但是它们在完全相同的坐标wrt上。

但是在图像1.2和2.2中，两个元素应该在条形相同的位置，但是两者是不同的。当我向右行驶时，红色方框向左漂移。我希望两个盒子都相对于盒子处于同一位置。

这是我用来从整个svg获取像素坐标的代码

var pt = $("#bar-chart-modal").find(".si-dataviz-bar")[0].createSVGPoint();  // Created once for document
              pt.x = e.clientX;
              pt.y = e.clientY;
              // The cursor point, translated into svg coordinates
              var cursorpt = pt.matrixTransform($("#bar-chart-modal").find(".si-dataviz-bar")[0].getScreenCTM().inverse());
              console.log("(" + cursorpt.x + ", " + cursorpt.y + ")");

每当我拖动周围的元素给我X和Y时，该代码就会运行。然后像这样在drawImage（）中使用这些坐标

 ctx.drawImage(footerImg, self.pagex, self.pagey);

注意：由于我无法将Div元素附加到SVG，因此将其附加到SCG的父div，该父元素的宽度和高度与SVG相同谁能帮忙告诉我我要去哪里哪里

谢谢

在具有相同SVG坐标的画布图像上放置一个Div

0 个答案: