我有一个 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 initialPointconst 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函数
TA贡献1836条经验 获得超4个赞
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 及其常量。如果我在这方面得到帮助，我会很高兴
拉风的咖菲猫
TA贡献1995条经验 获得超2个赞
要找到您使用毕达哥拉斯的线的长度
例如两点 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>
添加回答
举报
0/150
提交
取消