position of mouse pointer
lazarus / 76-Pas2JS

----------------------------------------------------------------------
krolikbest · 2023-05-03 14:09

Hi,
lets say I have html file with 'canvas' element and I'd like to know
the mouse position over this canvas. So far the html looks like:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i <!doctype
html><html lang="en"><head>  <meta http-equiv="Content-type"
content="text/html; charset=utf-8">  <meta name="viewport"
content="width=device-width, initial-scale=1"> 
 <title>Project1</title>  <script src="project1.js"></script>  <style
type="text/css">body{padding: 1%}#canv1 { position : fixed; left:
30px; border:1px solid #000000; box-shadow: 5px 10px 10px #888888; top
: 300px;}</style></head><body><div id="parag1"><p
id="p1"></p></div><canvas id="canv1" width="400"
height="300"></canvas>   <script>  rtl.run();  </script></body></html>
and the pas2js code:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i program
project1; {$mode objfpc} uses  JS, Classes, SysUtils, Web; var  canv1
: TJSHTMLCanvasElement;  canv1_ctx : TJSCanvasRenderingContext2D;  cx,
cy, x,y, r : Integer;  mouse1 : TJSMouseEvent;  event1 :
TJSEvent; procedure mouseMove;begin //document.getElementById('p1').in
nerHTML:=inttostr(round(canv1.getBoundingClientRect.x)); //str1:=float
tostr(mouse1.clientX); document.getElementById('p1').innerHTML:= //X,
Y position of the mouseend; begin 
canv1:=TJSHTMLCanvasElement(document.getElementById('canv1')); 
canv1_ctx:=canv1.getContextAs2DContext('2d'); 
document.querySelector('#canv1').addEventListener('mousemove',
@mouseMove);end.                                           
I don't want to use WCL elements from Lazarus this time. Maybe it is
simple to solve but I'm stuck.. Simply saying I don't know how to use
TJSMouseEvent, or maybe TJSEvent to grab mouse position??

----------------------------------------------------------------------
krolikbest · 2023-05-03 16:16

Ok, it was really simple. Procedure mouseMove should be defined as
mouseMove(evt : TJSMouseMove) so it looks like:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i procedure
mouseMove(evt : TJSMouseMove);begin //document.getElementById('p1').in
nerHTML:=inttostr(round(canv1.getBoundingClientRect.x)); document.getE
lementById('p1').innerHTML:=evt.X;end;