Copy link to clipboard
Copied
Hi,
We write a plugin for Illustrator in which we want to show 3D graphics associated to a mouse position in a design. Therefore we need a HTML5 canvas in an Illustrator panel. We should also be able to manipulate the view on the 3D graphics based upon the mouse movements. We did a test and we discovered that we cannot capture the mouse move event in the canvas. Is there a solution for this?
Beneath you can see the HTML code of the panel. Strange, when we press the left mouse button the mouse move event is triggered. Nothing happens when moving the mouse. The same page on a webserver works.
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div id='contents'>
<div id='canvasContainer'>
<canvas id='canvas-id' width='450' height='450' style="border:1px solid #0000ff;" onmousemove="myFunction(event)">
Your browser does not support the HTML5 canvas element.
</canvas>
<canvas class='tooltip' id='tooltip-id' width='200' height='25'> </canvas>
</div>
</div>
<div id='message-id'> </div>
<script id='code-js' type='text/javascript'>
//document.getElementById("canvasContainer").onmousemove = function(event) {myFunction(event)};
function myFunction(e) {
var x = e.clientX;
var y = e.clientY;
var coor = "Coordinates: (" + x + "," + y + ")";
document.getElementById("message-id").innerHTML = coor;
console.log("MOUSE MOVE");
}
</script>
</body>
</html>
Copy link to clipboard
Copied
Hi @Frank Marijsse,
Is this a C++ plugin that you are creating the panel with and then hosting the Iframe/canvas on this panel or are you creating a CEP extension?
-Manan
Copy link to clipboard
Copied