- masyarakat
- Belajar
- Perpustakaan Alatan
- Masa lapang
Rumah > Soal Jawab > teks badan
P粉2140893492023-09-01 00:39:24
Anda boleh menjejaki x dan y imej dalam tatasusunan dan mengulangi tatasusunan untuk memeriksa sama ada penuding tetikus berada agak jauh dari mana-mana objek, jika ya maka lukis bulatan dan dalam imej jauh sambungannya adalah jika anda bercadang untuk menambah lebih daripada 2 imej yang dipaparkan (tidak tahu tentang imej yang dihoskan secara tempatan) dan titik mula dan tamat adalah berbeza, kemudian pada titik tengah kedua-dua belah anda perlu menggunakan tetapan semasa berdasarkan nilai perubahan imej, anda boleh hardcodenya, berikut ialah pelaksanaan saya:
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();
}
}
};
Saya tidak menukar html