Les points de début et de fin de l'image

Question

J'essaie de définir les points de début et de fin d'une image. J'ai donc ma toile et une image, lorsque je mets l'image dans la toile, je veux qu'elle allume un petit cercle rouge lorsque je survole les points de début/fin, ce qui signifie que je peux créer avec d'autres images connectées. Par exemple : 1) Faites glisser l'image. 2) Placez l'image dans la toile. 3) Passez la souris sur le point de départ/point final et le petit point rouge s'allumera. Comme vous pouvez le constater, le point rouge n'apparaît qu'au survol. Autre question, mais sympa si vous résolvez la première, l'image ne suit pas la grille (carré). Ceci est un exemple de constressistor pour html/js

P粉214089349 · Answer

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

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket