拖动jQuery中的svg或png元素，忽略透明度

Question

我在svg和png中有不同的图像，我希望能够仅通过图像本身拖动这些数字。所以我希望能够"忽略"或者禁用不可见的可拖动区域。

我尝试过不同的方法，比如将图像绘制到<canvas>元素上，并试图获得大于零的像素，但我没有成功。我还能做什么呢?

window.onload = function() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var img1 = new Image();
img1.src = "favicon.svg";
ctx.drawImage(img1, 0, 0, 200, 150);

$(c).draggable();

var currentCanvas = ctx.getImageData(0, 0, 200, 150);
var pix = currentCanvas.data;
if (pix[3] > 0) { // 0 is transparent, 1 up to 255 is visible
$(pix).draggable();
}
}

Answer 1

考虑以下内容:

$(function() {
var c = $("#myCanvas");
var ctx = c.get(0).getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();
c.draggable();
var s = $("#mySVG");
$("circle", s).draggable();
})

#myCanvas {
border: 1px solid #000000;
}
#mySVG circle {
fill: rgb(255, 255, 0);
stroke-width: 1;
stroke: rgb(0, 0, 0)
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<canvas id="myCanvas" width="100" height="100"></canvas>
<svg width="100" height="100" id="mySVG">
<circle cx="50" cy="50" r="40" />
</svg>

Draggable应用于两者。在SVG的情况下，circle元素是目标元素，并且在其父元素中是可拖动的。如果你把它拖到SVG的边界之外，它就不在视口中了。

您可以使用handles选项。

$(function() {
$("#mySVG").draggable({
handle: "circle"
});
})

#mySVG circle {
fill: rgb(255, 255, 0);
stroke-width: 1;
stroke: rgb(0, 0, 0)
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<svg width="100" height="100" id="mySVG">
<circle cx="50" cy="50" r="40" />
</svg>

这样，整个SVG是可拖动的，但只有当用户瞄准句柄时才会移动。

您也可以尝试只在画布上单击适当的元素时才接受拖动。

这在这里有更多的讨论:找出在html5画布上被点击的对象

尝试使用Pixel数据可能太困难了。在您的示例中，pix是每个像素的数组。它们没有任何定位参考。