确定在 HTML 画布中绘制的直线和曲线之间的距离
我有一个 HTML、CSS 和 JavaScript 程序，可以从初始点（Mousedown 事件）绘制一条曲线（Mousemove 事件），然后在抬起鼠标单击时绘制一条直线（MouseUp 事件）。
现在我的问题是在两个不同的标签中找到曲线和直线的距离。
我的代码如下
var canvas = document.querySelector('#paint');
var ctx = canvas.getContext('2d');
var sketch = document.querySelector('#sketch');
var sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));
var mouse = {
x: 0,
y: 0
};
var last_mouse = {
x: 0,
y: 0
};
/* Mouse Capturing Work */
canvas.addEventListener('mousemove', function(e) {
last_mouse.x = mouse.x;
last_mouse.y = mouse.y;
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
}, false);
/* Drawing on Paint App */
ctx.lineWidth = 5;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = 'black';
canvas.addEventListener('mousedown', function(e) {
initialPoint = {
x: mouse.x,
y: mouse.y
}
canvas.addEventListener('mousemove', onPaint, false);
}, false);
canvas.addEventListener('mouseup', function() {
drawStraightLine()
canvas.removeEventListener('mousemove', onPaint, false);
}, false);
var onPaint = function() {
ctx.beginPath();
ctx.moveTo(last_mouse.x, last_mouse.y);
ctx.lineTo(mouse.x, mouse.y);
ctx.strokeStyle = "#000000";
ctx.closePath();
ctx.stroke();
};
let initialPoint
const drawStraightLine = function() {
ctx.beginPath();
ctx.moveTo(initialPoint.x, initialPoint.y);
ctx.lineTo(mouse.x, mouse.y);
ctx.strokeStyle = "#FF000077";
ctx.stroke();
}
html,
body {
width: 80%;
height: 50%;
}
#sketch {
border: 10px solid gray;
height: 100%;
}
<div id="sketch">
<canvas id="paint"></canvas>
<script src="1.js"></script>
</div>
<label id="StraightLineDistance"></label>
<label id="CurvedLineDistance"></label>
跃然一笑2回答
-
HUH函数
JavaScript 文件const canvas = document.querySelector('#paint');const ctx = canvas.getContext('2d');const sketch = document.querySelector('#sketch');const sketch_style = getComputedStyle(sketch);canvas.width = parseInt(sketch_style.getPropertyValue('width'));canvas.height = parseInt(sketch_style.getPropertyValue('height'));var pathLength = 0;var distance = 0;const mouse = {x: 0, y: 0};const last_mouse = {x: 0, y: 0};const initialPoint = {x: 0, y: 0};function distanceBetween(A, B) {const dx = B.x - A.x; const dy = B.y - A.y; return (dx * dx + dy * dy) ** 0.5;}/* Drawing on Paint App */ctx.lineWidth = 5;ctx.lineJoin = 'round';ctx.lineCap = 'round';ctx.strokeStyle = 'black';canvas.addEventListener('mousedown', function(e) {initialPoint.x = mouse.x = e.pageX - this.offsetLeft;initialPoint.y = mouse.y = e.pageY - this.offsetTop;pathLength = 0;canvas.addEventListener('mousemove', onPaint);}, false);canvas.addEventListener('mouseup', function() {drawStraightLine()canvas.removeEventListener('mousemove', onPaint);}, false);function displayLengths() {StraightLineDistance.textContent = "Distance: " + distance.toFixed(0) + "px";CurvedLineDistance.textContent = "Traveled: " + pathLength.toFixed(0) + "px";} function onPaint(e) {last_mouse.x = mouse.x;last_mouse.y = mouse.y;mouse.x = e.pageX - this.offsetLeft;mouse.y = e.pageY - this.offsetTop;ctx.strokeStyle = "#000000";ctx.beginPath();ctx.lineTo(last_mouse.x, last_mouse.y);ctx.lineTo(mouse.x, mouse.y);ctx.stroke();pathLength += distanceBetween(last_mouse, mouse);distance = distanceBetween(initialPoint, mouse);displayLengths();};function drawStraightLine() {ctx.strokeStyle = "#FF000077";ctx.beginPath();ctx.lineTo(initialPoint.x, initialPoint.y);ctx.lineTo(mouse.x, mouse.y);ctx.stroke();distance = distanceBetween(initialPoint, mouse);displayLengths(); }HTML 文件<link rel="stylesheet" href="1.css"/></head><body><div id="sketch"><canvas id="paint"></canvas><script src="1.js"></script></div><label id="StraightLineDistance"></label><br/><label id="CurvedLineDistance"></label><br/><label id="Index"></label></body></html>我的新疑问是如何在标签 id="Index" 中显示 (distance/pathLength) 比值的实时值我试过使用 Index.textContent = (distance/pathLength).toFixed(0); 但这在输出中显示 1 及其常量。如果我在这方面得到帮助，我会很高兴 -
拉风的咖菲猫
要找到您使用毕达哥拉斯的线的长度例如两点 A、B 之间的距离function distanceBetween(A, B) { return ((B.x - A.x) ** 2 + (B.y - A.y) ** 2) ** 0.5;}或者function distanceBetween(A, B) { const dx = B.x - A.x; const dy = B.y - A.y; return Math.sqrt(dx * dx + dy * dy);}或者function distanceBetween(A, B) { return Math.hypot(B.x - A.x, B.y - A.y);}要测量绘制的路径，您需要累积每个子路径（线）的长度以获得总和。例子该示例在绘制时累积长度。当鼠标按下事件发生时，累积长度为零。const canvas = document.querySelector('#paint');const ctx = canvas.getContext('2d');const sketch = document.querySelector('#sketch');const sketch_style = getComputedStyle(sketch);canvas.width = parseInt(sketch_style.getPropertyValue('width'));canvas.height = parseInt(sketch_style.getPropertyValue('height'));var pathLength = 0;var distance = 0;const mouse = {x: 0, y: 0};const last_mouse = {x: 0, y: 0};const initialPoint = {x: 0, y: 0};function distanceBetween(A, B) { const dx = B.x - A.x; const dy = B.y - A.y; return (dx * dx + dy * dy) ** 0.5;}/* Drawing on Paint App */ctx.lineWidth = 5;ctx.lineJoin = 'round';ctx.lineCap = 'round';ctx.strokeStyle = 'black';canvas.addEventListener('mousedown', function(e) { initialPoint.x = mouse.x = e.pageX - this.offsetLeft; initialPoint.y = mouse.y = e.pageY - this.offsetTop; pathLength = 0; canvas.addEventListener('mousemove', onPaint);}, false);canvas.addEventListener('mouseup', function() { drawStraightLine() canvas.removeEventListener('mousemove', onPaint);}, false);function displayLengths() { StraightLineDistance.textContent = "Distance: " + distance.toFixed(0) + "px"; CurvedLineDistance.textContent = "Traveled: " + pathLength.toFixed(0) + "px";}function onPaint(e) { last_mouse.x = mouse.x; last_mouse.y = mouse.y; mouse.x = e.pageX - this.offsetLeft; mouse.y = e.pageY - this.offsetTop; ctx.strokeStyle = "#000000"; ctx.beginPath(); ctx.lineTo(last_mouse.x, last_mouse.y); ctx.lineTo(mouse.x, mouse.y); ctx.stroke(); pathLength += distanceBetween(last_mouse, mouse); distance = distanceBetween(initialPoint, mouse); displayLengths();};function drawStraightLine() { ctx.strokeStyle = "#FF000077"; ctx.beginPath(); ctx.lineTo(initialPoint.x, initialPoint.y); ctx.lineTo(mouse.x, mouse.y); ctx.stroke(); distance = distanceBetween(initialPoint, mouse); displayLengths();}html,body { width: 80%; height: 50%;}#sketch { border: 10px solid gray; height: 100%;}<div id="sketch"> <canvas id="paint"></canvas> <script src="1.js"></script></div><label id="StraightLineDistance"></label><label id="CurvedLineDistance"></label>
随时随地看视频慕课网APP
相关分类
JavaScript