我正在尝试设置图像的起点和终点。所以我有我的画布和图像，当我将图像放入画布时，我希望当我将鼠标悬停在起点/终点时，它会亮起一个小红色圆圈，这意味着我可以与其他图像创建连接。例如：1) 拖动图像。 2) 将图像放入画布内。 3）鼠标悬停到起点/终点，小红点亮起。
如您所见，红点仅在悬停时出现。另一个问题，但如果你解决第一个问题很酷，图像不会跟随烤架（正方形）。 这是 html/js 的示例
const resistor = document.getElementById('component_circuit_resistor'); const condensator = document.getElementById('component_circuit_condensator'); const tranistor = document.getElementById('component_circuit_tranistor'); const alimentator = document.getElementById('component_circuit_alimentator'); const circuit = document.getElementById('components_circuit'); const back_button = document.getElementById('back-button'); const clear_button = document.getElementById('clear-button'); const draggable = document.querySelectorAll('.draggable'); const container = document.querySelectorAll('.container'); const canvas = document.getElementById('canvas'); const foward_button = document.getElementById('foward-button'); /** EDIT START */ const draggableImages = document.querySelectorAll('img[draggable]'); for (let i = 0; i < draggableImages.length; i++) draggableImages[i].ondragstart = (ev) => { ev.dataTransfer.setData('text/plain', i.toString()); }; canvas.ondragover = (ev) => ev.preventDefault(); // IMPORTANT const orderStack = []; const deletedOrderStack = []; const drawnImageData = []; const deletedImageData = []; canvas.ondrop = (ev) => { const index = parseInt(ev.dataTransfer.getData('text/plain')); const img = draggableImages[index]; const x = ev.clientX - canvas.offsetLeft - img.width / 2; const y = ev.clientY - canvas.offsetTop - img.height / 2; const squareSize = 10; // adjust this to match the size of your squares const maxSize = 75; // maximum size of the image const aspectRatio = img.width / img.height; let width = maxSize; let height = maxSize / aspectRatio; if (height > maxSize) { height = maxSize; width = height * aspectRatio; } const snappedX = Math.round(x / squareSize) * squareSize; const snappedY = Math.round(y / squareSize) * squareSize; ctx.drawImage(img, snappedX, snappedY, width, height); drawnImageData.push(ctx.getImageData(0, 0, canvas.width, canvas.height)); orderStack.push(1); deletedImageData.length = 0; deletedOrderStack.length = 0; back_button.disabled = false; back_button.style.cursor = 'pointer'; clear_button.disabled = false; clear_button.style.cursor = 'pointer'; foward_button.disabled = true; foward_button.style.cursor = 'not-allowed'; return false; }; clear_button.disabled = true; clear_button.style.cursor = 'not-allowed'; foward_button.disabled = true; foward_button.style.cursor = 'not-allowed'; back_button.disabled = true; back_button.style.cursor = 'not-allowed'; /** EDIT END */ canvas.width = 1900; canvas.height = 1000; canvas.style.backgroundColor = 'white'; circuit.appendChild(canvas); canvas.style.borderRadius = '10px'; canvas.style.marginLeft = 'auto'; canvas.style.marginRight = 'auto'; canvas.style.display = 'block'; const ctx = canvas.getContext('2d'); //const circles = []; const lines = []; const lines_c = []; var deletedLines = []; function drawSquares() { const squareSize = 10; const numColumns = Math.floor(canvas.width / squareSize); const numRows = Math.floor(canvas.height / squareSize); ctx.fillStyle = "#FAF9F9"; ctx.strokeStyle = "#F4F1F0"; ctx.lineWidth = 1; for (let i = 0; i < numColumns; i++) { for (let j = 0; j < numRows; j++) { const x = i * squareSize; const y = j * squareSize; if (i % 10 === 0 && j % 10 === 0) { ctx.lineWidth = 2.6; ctx.fillStyle = "#F1ECEB"; ctx.strokeStyle = "#E6E0DE"; // set the stroke color to a darker shade ctx.strokeRect(x, y, squareSize * 10, squareSize * 10); ctx.fillStyle = "#F4F1F0"; ctx.strokeStyle = "#F4F1F0"; // reset the stroke color ctx.lineWidth = 1; } else { ctx.strokeRect(x, y, squareSize, squareSize); } } } } drawSquares(); Componenti:
Disegna il tuo circuito!
提供的代码可能在 stackoverflow 上不起作用，请在本地尝试。如果您使用其他图像，请提供链接。
您可以跟踪数组中图像的 x 和 y，并迭代数组以检查鼠标指针是否距任何对象一定距离，如果是，则画一个圆，在远程图像中，连接是如果您计划添加超过 2 个显示的图像（不知道本地托管的图像）且起点和终点不同，则在两侧的中点处，您将需要根据图像更改值使用当前的设置，您可以对其进行硬编码，这是我的实现：
const resistor = document.getElementById('component_circuit_resistor'); const condensator = document.getElementById('component_circuit_condensator'); const tranistor = document.getElementById('component_circuit_tranistor'); const alimentator = document.getElementById('component_circuit_alimentator'); const circuit = document.getElementById('components_circuit'); const back_button = document.getElementById('back-button'); const clear_button = document.getElementById('clear-button'); const draggable = document.querySelectorAll('.draggable'); const container = document.querySelectorAll('.container'); const canvas = document.getElementById('canvas'); const foward_button = document.getElementById('foward-button'); let images = []; /** EDIT START */ const draggableImages = document.querySelectorAll('img[draggable]'); for (let i = 0; i < draggableImages.length; i++) draggableImages[i].ondragstart = (ev) => { ev.dataTransfer.setData('text/plain', i.toString()); }; canvas.ondragover = (ev) => ev.preventDefault(); // IMPORTANT const orderStack = []; const deletedOrderStack = []; const drawnImageData = []; const deletedImageData = []; canvas.ondrop = (ev) => { const index = parseInt(ev.dataTransfer.getData('text/plain')); const img = draggableImages[index]; const x = ev.clientX - canvas.offsetLeft - img.width / 2; const y = ev.clientY - canvas.offsetTop - img.height / 2; const squareSize = 10; // adjust this to match the size of your squares const maxSize = 75; // maximum size of the image const aspectRatio = img.width / img.height; let width = maxSize; let height = maxSize / aspectRatio; if (height > maxSize) { height = maxSize; width = height * aspectRatio; } const snappedX = Math.round(x / squareSize) * squareSize; const snappedY = Math.round(y / squareSize) * squareSize; ctx.drawImage(img, snappedX, snappedY, width, height); images.push({ img, x: snappedX, y: snappedY, width, height }); // Add the image and its position to the images array }; clear_button.disabled = true; clear_button.style.cursor = 'not-allowed'; foward_button.disabled = true; foward_button.style.cursor = 'not-allowed'; back_button.disabled = true; back_button.style.cursor = 'not-allowed'; /** EDIT END */ canvas.width = 1900; canvas.height = 1000; canvas.style.backgroundColor = 'white'; circuit.appendChild(canvas); canvas.style.borderRadius = '10px'; canvas.style.marginLeft = 'auto'; canvas.style.marginRight = 'auto'; canvas.style.display = 'block'; const ctx = canvas.getContext('2d'); //const circles = []; const lines = []; const lines_c = []; var deletedLines = []; function drawSquares() { const squareSize = 10; const numColumns = Math.floor(canvas.width / squareSize); const numRows = Math.floor(canvas.height / squareSize); ctx.fillStyle = "#FAF9F9"; ctx.strokeStyle = "#F4F1F0"; ctx.lineWidth = 1; for (let i = 0; i < numColumns; i++) { for (let j = 0; j < numRows; j++) { const x = i * squareSize; const y = j * squareSize; if (i % 10 === 0 && j % 10 === 0) { ctx.lineWidth = 2.6; ctx.fillStyle = "#F1ECEB"; ctx.strokeStyle = "#E6E0DE"; // set the stroke color to a darker shade ctx.strokeRect(x, y, squareSize * 10, squareSize * 10); ctx.fillStyle = "#F4F1F0"; ctx.strokeStyle = "#F4F1F0"; // reset the stroke color ctx.lineWidth = 1; } else { ctx.strokeRect(x, y, squareSize, squareSize); } } } } drawSquares(); // Add a mousemove event to the canvas to show the red dot const redDotRadius = 5; // The radius of the red dots const hoverDistance = 10; // The distance from a point at which to show the dot canvas.onmousemove = (ev) => { const mouseX = ev.clientX - canvas.offsetLeft; const mouseY = ev.clientY - canvas.offsetTop; // Clear the canvas and redraw everything ctx.clearRect(0, 0, canvas.width, canvas.height); drawSquares(); for (let i = 0; i < images.length; i++) { let image = images[i]; ctx.drawImage(image.img, image.x, image.y, image.width, image.height); } // Check if the mouse is near a starting or ending point for (let i = 0; i < images.length; i++) { let image = images[i]; let startX = image.x+5; let startY = image.y + image.height/2; let endX = image.x + image.width -5; let endY = image.y + image.height/2; if (Math.abs(mouseX - startX) < hoverDistance && Math.abs(mouseY - startY) < hoverDistance) { // Near the starting point, draw a red dot ctx.beginPath(); ctx.arc(startX, startY, redDotRadius, 0, 2 * Math.PI, false); ctx.fillStyle = 'red'; ctx.fill(); } else if (Math.abs(mouseX - endX) < hoverDistance && Math.abs(mouseY - endY) < hoverDistance) { // Near the ending point, draw a red dot ctx.beginPath(); ctx.arc(endX, endY, redDotRadius, 0, 2 * Math.PI, false); ctx.fillStyle = 'red'; ctx.fill(); } } };我没有更改 html