P粉2140893492023-09-01 00:39:24
You can keep track of the x and y of the image in the array and iterate over the array to check if the mouse pointer is some distance away from any object, if so then draw a circle and in the remote image the connection is if you plan to add more than 2 The image shown (don't know about locally hosted images) and the start and end points are different, then at the midpoint of both sides you will need to use the current settings based on the image change value, you can hardcode it, here is mine accomplish:
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();
}
}
};
I didn’t change the html