Die Start- und Endpunkte des Bildes

Question

Ich versuche, den Start- und Endpunkt eines Bildes festzulegen. Ich habe also meine Leinwand und ein Bild. Wenn ich das Bild auf die Leinwand lege, soll ein kleiner roter Kreis aufleuchten, wenn ich mit der Maus über die Start-/Endpunkte fahre, was bedeutet, dass ich eine Verbindung mit anderen Bildern herstellen kann. Beispiel: 1) Ziehen Sie das Bild. 2) Platzieren Sie das Bild auf der Leinwand. 3) Bewegen Sie die Maus über den Start-/Endpunkt und der kleine rote Punkt leuchtet auf. Wie Sie sehen können, erscheint der rote Punkt nur beim Schweben. Noch eine Frage, aber cool, wenn Sie die erste lösen, das Bild folgt nicht dem Gitter (quadratisch). Dies ist ein Beispiel-Constressistor für HTML/JS

P粉214089349 · Answer

您可以跟踪数组中图像的 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

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial