1
0
0
Vous pouvez garder une trace des x et y de l'image dans le tableau et parcourir le tableau pour vérifier si le pointeur de la souris est à une certaine distance de tout objet, si c'est le cas, dessinez un cercle et dans l'image distante, la connexion est si vous envisagez d'ajouter plus de 2 images affichées (je ne connais pas les images hébergées localement) et les points de début et de fin sont différents, alors au milieu des deux c?tés, vous devrez utiliser les paramètres actuels en fonction de la valeur de changement d'image, vous pouvez le coder en dur, voici mon implémentation?:
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();
}
}
};
Je n'ai pas changé le html
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
