position of mouse pointer

Forum > Pas2JS

(1/1)

krolikbest:
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 [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---<!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 [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---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').innerHTML:=inttostr(round(canv1.getBoundingClientRect.x)); //str1:=floattostr(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:
Ok, it was really simple. Procedure mouseMove should be defined as mouseMove(evt : TJSMouseMove) so it looks like:

--- Code: Pascal [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---procedure mouseMove(evt : TJSMouseMove);begin //document.getElementById('p1').innerHTML:=inttostr(round(canv1.getBoundingClientRect.x)); document.getElementById('p1').innerHTML:=evt.X;end;

Navigation

[0] Message Index