javascript - 确定在 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>
解决方案
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" 中显示(距离/路径长度)比率的实时值
我试过使用 Index.textContent = (distance/pathLength).toFixed(0); 但这在输出中显示了 1 及其常量。如果我能得到帮助,我会很高兴
推荐阅读
- javascript - Google Drive API 进度条错误
- loops - 如何使用 SPSS LOOP 对同一变量的不同值重复命令?
- asp.net - 在运行时将参数传递给水晶报表不起作用
- azure - Xamarin 上的 Bing 语音 API / 语音服务(无 REST,sdk Web 套接字来处理连续识别)
- c# - 使用 curl 上传多个文件会导致 IFormFile 列表为空
- ios - 在 iOS 中注册房间服务器 Webrtc 失败
- android - 为什么 android canvas 中的 drawArc 方法不提供绘制样式为 STROKE 的平滑圆?
- salesforce - 如何从 Apex 导出 CSV 格式的数据?
- shader - Metal:如何在没有颜色/伽玛转换的情况下将图像附加到着色器?
- reactjs - 从 Thunk 或 Saga 或 Observable 或 Redux Promise Middleware 中启动异步 Redux 时,我会使用什么?