画像の開始点と終了点
P粉511757848
2023-08-31 12:24:51
<p>我正在尝试设置图像的起点和终点。所以我有我的画布和图像，当我将图像放入画布时，我希望当我将鼠标悬停在起点/终点时，它会亮起一个小红色圆圈，这意味着我可以与其他图像创建连接。例如：<strong>1) 拖动图像。 2) 将图像放入画布内。 3）鼠标悬停到起点/终点，小红点亮起。</strong>
</p>
<p>如您所见，红点仅在悬停时出现。另一个问题，但如果你解决第一个问题很酷，图像不会跟随烤架（正方形）。
这是 html/js 的示例</p>
<p>
<pre class="brush:js;toolbar:false;">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 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);
drawnImageData.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
orderStack.push(1);
deletedImageData.length = 0;
deletedOrderStack.length = 0;
back_button.disabled = false;
back_button.style.cursor = 'pointer';
clear_button.disabled = false;
clear_button.style.cursor = 'pointer';
foward_button.disabled = true;
foward_button.style.cursor = 'not-allowed';
return false;
};
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();</pre>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="style.css">
<!-- <title>From Circuit to Breadboard</title> -->
</head>
<body>
<div class="container">
<div class="components">
<div id="components_circuit">
<h3 id ="h3_componenti_circuit">Componenti:</h3>
<ul id="components_circuit_border">
<li><img id ="component_circuit_resistor" src="https://www.elprocus.com/wp-content/uploads/Resistor-Symbol-768x288.png" height="50" draggable="true"></li>
<br><br>
<li><img id = "component_circuit_condensator" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Capacitor_Symbol_alternative.svg/1280px-Capacitor_Symbol_alternative.svg.png" height="50" draggable="true"></li>
<br><br>
<li><img id="component_circuit_transistor" src="images/circuit_transistor.png" height="50" draggable="true"></li>
<br><br>
<li><img id="component_circuit_alimentator" src="images/circuit_alimentator.png" height="50" draggable="true"></li>
</ul>
<div class = "elementi_disegno">
<h1 id ="h1_disegna">Disegna il tuo circuito!</h1>
<button id="back-button">Indietro
<span class="material-symbols-outlined">undo</span>
</button>
<button id="foward-button">Avanti
<span class="material-symbols-outlined">redo</span>
</button>
<button id="clear-button">Clear All
<span class="material-symbols-outlined">delete</span>
</button>
<canvas id = "canvas" class = "dropzone"></canvas>
</div>
</div>
<script src="script.js"></script>
</body>
</html></pre>
</p>
<p>提供的代码可能在 stackoverflow 上不起作用，请在本地尝试。如果您使用其他图像，请提供链接。</p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
配列内の画像の x と y を追跡し、配列を反復処理して、マウス ポインタがオブジェクトからある程度離れているかどうかを確認できます。オブジェクトから離れている場合は、円を描き、リモート画像に接続を行います。表示されている画像 (ローカルでホストされている画像についてはわかりません) を 2 つ以上追加する予定であり、開始点と終了点が異なる場合は、両側の中点で画像に基づいた現在の設定を使用する必要があります。値を変更します。ハードコーディングできます。これが私の成果です:
リーリーHTMLは変更していません