图像的起点和终点

Question

我正在尝试设置图像的起点和终点。所以我有我的画布和图像，当我将图像放入画布时，我希望当我将鼠标悬停在起点/终点时，它会亮起一个小红色圆圈，这意味着我可以与其他图像创建连接。例如：1)拖动图像。2)将图像放入画布内。3）鼠标悬停到起点/终点，小红点亮起。如您所见，红点仅在悬停时出现。另一个问题，但如果你解决第一个问题很酷，图像不会跟随烤架（正方形）。这是html/js的示例constresistor

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