Panduan langkah demi langkah untuk menyeret imej dan meletakkannya ke dalam kanvas

Question

Saya cuba menyeret dan melepaskan beberapa imej di dalam kanvas dengan dimensi yang sama seperti yang saya buat, tetapi ia tidak berfungsi. //JavascriptperlacreazionedicirucuitielettriciconstNUMERO_CICLO=990;constNUMERO_CICLO_INTERNO=60;constressor=document.getElementById("component_circuit_resi

P粉808697471 · Answer

Beri anda:

//Javascript per la creazione di cirucuiti elettrici

const NUMERO_CICLO = 990;
const NUMERO_CICLO_INTERNO = 60;

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');

/** 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 drawnImageData = [];

canvas.ondrop = (ev) => {
  const index = parseInt(ev.dataTransfer.getData('text/plain'));
  const img = draggableImages[index];
  drawnImageData.push({ img, x: ev.offsetX, y: ev.offsetY });
};
/** EDIT END */

canvas.width = 1500;
canvas.height = 855;
canvas.style.backgroundColor = 'lightgrey';
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 = [];

for (let y = 20; y <= NUMERO_CICLO; y += 20) {
  for (let i = 0; i < NUMERO_CICLO_INTERNO; i++) {
    circles.push({
      x: 13 + i * 25,
      y,
      radius: 5,
      color: 'grey',
    });
  }
}

let startCircle = null;
let endCircle = null;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  circles.forEach((circle) => {
    ctx.beginPath();
    ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
    ctx.fillStyle = circle.color;
    ctx.fill();
  });
  lines.forEach((line) => {
    ctx.beginPath();
    ctx.lineWidth = 4;
    ctx.moveTo(line.start.x, line.start.y);
    ctx.lineTo(line.end.x, line.end.y);
    ctx.stroke();
  });
  if (startCircle && endCircle) {
    ctx.beginPath();
    ctx.lineWidth = 4;
    ctx.moveTo(startCircle.x, startCircle.y);
    ctx.lineTo(endCircle.x, endCircle.y);
    ctx.stroke();
  }
  /** EDIT START */
  for (const data of drawnImageData)
    ctx.drawImage(data.img, data.x, data.y, data.img.width, data.img.height);
  /** EDIT END */
  requestAnimationFrame(draw);
}
draw();

function goBack() {
  if (lines.length > 0 && back_clicked == true) {
    const eliminato = lines.pop();
    deletedLines.push(eliminato);
  } else if (foward_clicked == true && deletedLines.length > 0) {
    const lastDeleted = deletedLines[deletedLines.length - 1];
    if (!lines.includes(lastDeleted)) {
      lines.push(lastDeleted);
      deletedLines.pop();
    }
  }
  //se non ci sono linee da eliminare mando alert
  else if (lines.length == 0 && back_clicked == true) {
    alert('There are no lines to delete');
  }
}

function clearCanvas() {
  if (confirm('Are you sure you want to delete the circuit?')) {
    lines.length = 0;
    deletedLines.length = 0;
    lastDeleted = null;
  }
}

function getNearestCircle(x, y) {
  let nearestCircle = null;
  let nearestDistance = Infinity;
  circles.forEach((circle) => {
    const distance = Math.sqrt((circle.x - x) ** 2 + (circle.y - y) ** 2);
    if (distance < nearestDistance && distance < 30) {
      nearestCircle = circle;
      nearestDistance = distance;
    }
  });
  return nearestCircle;
}

let isDrawing = false;

canvas.addEventListener('mousedown', (event) => {
  const x = event.offsetX;
  const y = event.offsetY;
  const circle = getNearestCircle(x, y);
  if (circle) {
    startCircle = circle;
    endCircle = { x, y };
    isDrawing = true;
  }
});

canvas.addEventListener('mousemove', (event) => {
  if (isDrawing) {
    endCircle.x = event.offsetX;
    endCircle.y = event.offsetY;
  } else {
    const x = event.offsetX;
    const y = event.offsetY;
    const circle = getNearestCircle(x, y);
    if (circle) {
      circles.forEach((circle) => {
        circle.color = 'grey';
      });
      circle.color = 'red';
    } else {
      circles.forEach((circle) => {
        circle.color = 'grey';
      });
    }
  }
});

canvas.addEventListener('mouseup', () => {
  if (isDrawing) {
    const x = endCircle.x;
    const y = endCircle.y;
    const circle = getNearestCircle(x, y);
    if (circle) {
      lines.push({
        start: startCircle,
        end: circle,
      });
    }
    isDrawing = false;
    startCircle = null;
    endCircle = null;
  }
});

//back_button.addEventListener("click", goBack);
//foward_button.addEventListener("click", goBack);
clear_button.addEventListener('click', clearCanvas);
var back_clicked = false;
back_button.addEventListener('click', function () {
  back_clicked = true;
  goBack();
  back_clicked = false;
});

var foward_clicked = false;
foward_button.addEventListener('click', function () {
  foward_clicked = true;
  goBack();
  foward_clicked = false;
});

From Circuit to Breadboard

  
    
      Componenti:
      
        
          
        
        


        
          
        
        


        
          
        
        


      
      
        Disegna il tuo circuito!

Panduan langkah demi langkah untuk menyeret imej dan meletakkannya ke dalam kanvas

membalas semua(1)saya akan balas

From Circuit to Breadboard

Componenti:

Disegna il tuo circuito!