How to capture a mouse move event of a HTML5 canvas in an Illustator panel?

Community Beginner ,
Jul 12, 2022 Jul 12, 2022

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>

TOPICS
Bug , How to , SDK , Third party plugins

Views

48

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 16, 2022 Jul 16, 2022

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 17, 2022 Jul 17, 2022

Copy link to clipboard

Copied

LATEST
Hi, this is C++ plugin with CEP panel.
Best regards,
Frank


Verzonden vanaf mijn Samsung Galaxy-smartphone.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines