Tengo diferentes imágenes en svg y png y quiero poder arrastrar esas figuras solo por su imagen en sí. Así que quiero poder "ignorar" o deshabilitar áreas que no se pueden arrastrar y que son invisibles.
Probé diferentes enfoques, como dibujar las imágenes en un elemento <canvas> e intenté obtener los píxeles que son mayores que cero, pero no tuve éxito. ¿Qué más podría hacer?
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(); } }Considera lo siguiente.
$(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> Arrastrable se aplica a ambos. En el caso del SVG, el elemento del circle es objetivo y se puede arrastrar, dentro de su padre. Si lo arrastra fuera de los límites del SVG, ya no estará en la ventana gráfica.
Es posible que pueda usar la opción de 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>De esta manera, todo el SVG se puede arrastrar, pero solo se moverá cuando el usuario apunte al controlador.
También puede intentar aceptar Arrastrar solo cuando se hace clic en el elemento adecuado en el lienzo.
Esto se discute más aquí: Averigüe en qué objeto se hizo clic en un lienzo html5
Intentar usar los datos de Pixel puede ser demasiado difícil. En su ejemplo, pix es una matriz de cada píxel. No tienen ninguna referencia de posicionamiento.