javascript - 鼠标事件[X 和 Y 坐标]
问题描述
我是电子新手,不知何故我的 JS 脚本在电子中不起作用。这是我的 Javascript 。我想通过将其作为桌面应用程序在电子中实现此代码。请帮助我。每当我尝试使用电子启动它时,我似乎都无法获得像在网络浏览器中那样的结果。
这里我提供了 JS 脚本和 HTML。
var numbers = [];
var Globaldistance;
$(function() {
var x1,y1,x2,y2;
var drawlines ;
var theCanvas = document.getElementById('paint');
var ctx = theCanvas.getContext('2d');
var img = document.getElementById("trya");
theCanvas.width = 500;
theCanvas.height = 500;
var canvasOffset = $('#paint').offset();
$('#paint').mousemove(function(e) {
if (drawlines) {
ctx.clearRect(0,0,theCanvas.width,theCanvas.height);
ctx.strokeStyle = 'red';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(drawlines.x, drawlines.y);
ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
ctx.stroke();
document.getElementById("hehe").innerHTML= "Page X2: "+e.pageX;
document.getElementById("haha").innerHTML= "Page Y2: "+e.pageY;
x2 = e.pageX;
y2 = e.pageY;
} numbers.push(x1,y1);
numbers.push(x2,y2);
document.getElementById("tra").innerHTML= "Coordinates in x1 y1 x2 y2 respectively : "+numbers[0]+" "+numbers[1]+" "+numbers[2]+" "+numbers[3];
compute(numbers[0],numbers[1],numbers[2],numbers[3]);
});
$('#paint').mousedown(function(e) {
drawlines = {
x:e.pageX - canvasOffset.left,
y:e.pageY - canvasOffset.top
}
document.getElementById("hihi").innerHTML= "Page X1: "+e.pageX;
document.getElementById("hoho").innerHTML= "Page Y1: "+e.pageY;
x1= e.pageX;
y1= e.pageY;
});
$(window).mouseup(function() {
drawlines = null;
numbers = [];
});
});
function compute(a,b,c,d){
var x2x1 = c - a;
var y2y1 = d - b;
var dist = Math.sqrt(x2x1 * x2x1 + y2y1 *y2y1);
document.getElementById("test").innerHTML= Math.round(dist);
Globaldistance = dist;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<div class="can">
<canvas id="paint" style="border:1px solid #d3d3d3;"></canvas>
</div>
<p id="hehe"></p>
<p id="haha"></p>
<p id="hihi"></p>
<p id="hoho"></p>
<p id="tra"></p>
<p id="test"></p>
<script src="measure.js" type="text/javascript" ></script>
</body>
</html>
解决方案
推荐阅读
- sql - 如何使用宽表将 SQL 查询中的列与其他列进行比较?
- flutter - 仅在 Firestore 中存储时间
- css - 如何创建具有相对位置和绝对位置的响应式滑块?
- asp.net-core - GroupBy 生成错误的 OrderBy 查询
- r - 如何修复 R 中的“无法直接反向转换长度 > 1 的 unmarkedEstimate”错误?
- python - 可以使 Visual Studio 2017 使用 Python shell 吗?
- postgresql - 当 SELECT 在 numrange 上具有 WHERE 条件时,为什么我的 pg-promise 出现格式错误的文字错误?
- google-analytics - 计算嵌套字段而不丢失 BigQuery 中的导出架构
- apache-beam - DoFn 的处理函数未执行
- salesforce - 如何使用 SOQL 使用文字选择缺少的列?