Question

我是电子新手，所以我的JS脚本在电子中不起作用。这是我的Javascript。我想通过将其作为桌面应用程序以电子方式实现此代码。请帮助我。每当我尝试使用电子启动它时，似乎都无法获得像在Web浏览器中那样的结果。

在这里，我提供了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>

鼠标事件[X和Y坐标]

0 个答案: