When utilizing KineticJS on a canvas that has been rotated with css3, the functionality of the events appears to be malfunctioning

Question

When utilizing KineticJS on a canvas that has been rotated with css3, the functionality of the events appears to be malfunctioning

Currently, I'm working on a rotating pie-chart widget using Kineticjs. However, I have run into an issue where the events don't seem to function correctly when drawing on a rotated canvas element (with the parent node being rotated 60deg using CSS3). For instance, on a canvas rotated 15 deg clockwise, the hover event is consistently 15 deg off. Does anyone have any suggestions or ideas on how to address this problem?

javascript css-transitions kineticjs

Answer 1

Answer №1

Your query has a complex solution—here's why:

The issue lies in the transformed state of your DOM container.

While your Kinetic objects behave as though they are in their original, non-transformed state.

The misinterpretation by your kinetic objects is due to the browser providing them with transformed mouse coordinates.

An easy resolution: Keep your DOM container untransformed and handle all rotations within KineticJS

A more challenging fix: Convert the rotated DOM mouse points into unrotated points for Kinetic usage.

Here's how you can approach this problem:

CSS transforms typically rotate around the element's center (50%, 50%), so identify the center of your Kinetic stage

var cx = stage.getWidth() / 2;
var cy = stage.getHeight() / 2;

If you have mouse coordinates in the transformed space (DOM), you must convert them to untransformed points (KineticJS)

var unrotatedPoint = unrotatedXY(cx, cy, mouseX, mouseY, cssDegreeRotation);

Below is the function that accomplishes this task:

function unrotatedXY(cx, cy, mouseX, mouseY, cssDegreeRotation) {

    var dx = mouseX - cx;
    var dy = mouseY - cy;
    var r = Math.sqrt(dx * dx + dy * dy);
    var cssRadianAngle = cssDegreeRotation * Math.PI / 180;

    var rotatedAngle = Math.atan2(dy, dx);

    var unrotatedAngle = rotatedAngle -= cssRadianAngle;

    if (unrotatedAngle < 0) { unrotatedAngle += Math.PI * 2; }

    unrotatedX = cx + r * Math.cos(unrotatedAngle);
    unrotatedY = cy + r * Math.sin(unrotatedAngle);

    return({ x: unrotatedX, y: unrotatedY });
}

The mouseX/mouseY values are obtained from the document, not KineticJS.

Thus, you need to listen to mouse events on the document (or container element), rather than directly in KineticJS.

$(document).mousemove(function(e){handleMouseMove(e);});

function handleMouseMove(e){
  mouseX = parseInt(e.clientX - offsetX);
  mouseY = parseInt(e.clientY - offsetY);

  var unrotatedPoint = unrotatedXY(cx, cy, mouseX, mouseY, cssDegreeRotation);

  // Now, you can perform hover actions against your Kinetic nodes using these converted mouse coordinates…
}

To reconnect with KineticJS, consider utilizing node.fire to trigger events with custom event objects containing the adjusted mouse coordinates.

Answer 2

Your query has a complex solution—here's why:

The issue lies in the transformed state of your DOM container.

While your Kinetic objects behave as though they are in their original, non-transformed state.

The misinterpretation by your kinetic objects is due to the browser providing them with transformed mouse coordinates.

An easy resolution: Keep your DOM container untransformed and handle all rotations within KineticJS

A more challenging fix: Convert the rotated DOM mouse points into unrotated points for Kinetic usage.

Here's how you can approach this problem:

CSS transforms typically rotate around the element's center (50%, 50%), so identify the center of your Kinetic stage

var cx = stage.getWidth() / 2;
var cy = stage.getHeight() / 2;

If you have mouse coordinates in the transformed space (DOM), you must convert them to untransformed points (KineticJS)

var unrotatedPoint = unrotatedXY(cx, cy, mouseX, mouseY, cssDegreeRotation);

Below is the function that accomplishes this task:

function unrotatedXY(cx, cy, mouseX, mouseY, cssDegreeRotation) {

    var dx = mouseX - cx;
    var dy = mouseY - cy;
    var r = Math.sqrt(dx * dx + dy * dy);
    var cssRadianAngle = cssDegreeRotation * Math.PI / 180;

    var rotatedAngle = Math.atan2(dy, dx);

    var unrotatedAngle = rotatedAngle -= cssRadianAngle;

    if (unrotatedAngle < 0) { unrotatedAngle += Math.PI * 2; }

    unrotatedX = cx + r * Math.cos(unrotatedAngle);
    unrotatedY = cy + r * Math.sin(unrotatedAngle);

    return({ x: unrotatedX, y: unrotatedY });
}

The mouseX/mouseY values are obtained from the document, not KineticJS.

Thus, you need to listen to mouse events on the document (or container element), rather than directly in KineticJS.

$(document).mousemove(function(e){handleMouseMove(e);});

function handleMouseMove(e){
  mouseX = parseInt(e.clientX - offsetX);
  mouseY = parseInt(e.clientY - offsetY);

  var unrotatedPoint = unrotatedXY(cx, cy, mouseX, mouseY, cssDegreeRotation);

  // Now, you can perform hover actions against your Kinetic nodes using these converted mouse coordinates…
}

To reconnect with KineticJS, consider utilizing node.fire to trigger events with custom event objects containing the adjusted mouse coordinates.

Answer 3

Answer №2

Important Update:

Following markE's recommendation, resolving the issue proved to be more challenging than anticipated. The detailed problem and its resolution can be found here. Fortunately, it has been successfully resolved in a recent update.

The root cause of the original error was traced back to jquery's event handling code. Thankfully, this issue has been rectified and no longer exists in the latest version.

Answer 4

Important Update:

Following markE's recommendation, resolving the issue proved to be more challenging than anticipated. The detailed problem and its resolution can be found here. Fortunately, it has been successfully resolved in a recent update.

The root cause of the original error was traced back to jquery's event handling code. Thankfully, this issue has been rectified and no longer exists in the latest version.

When utilizing KineticJS on a canvas that has been rotated with css3, the functionality of the events appears to be malfunctioning

Answer №1

Answer №2

Similar questions

Tips for successfully including a positive sign character in string values within JSON in the URL's hash fragment

Filtering elements in a table using jQuery

utilizing Typescript object within an array of objects

Arrangement of 'const' variables within React Stateless Components

Is nested testing the key to an elegant JQuery/AJAX form validation solution?

Is there a more optimal way to choose lines than the Bresenham algorithm?

divide an array into two separate arrays depending on whether the index position is odd or even

I'm curious about the potential vulnerabilities that could arise from using a Secret key as configuration in an express-session

Guidance on sharing an image on Twitter using Node.js

Utilize Javascript/Jquery to categorize JSON data based on the days of the week (Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday)

Adding an image to a jQuery class name on the fly

Tips for incorporating JSON data into an HTML table

Creating multiple asynchronous calls within a loop in JavaScript

Comparing defaultProps with the logical OR operator

What are the steps to accessing validation errors using express-validator?

Leverage Pinia store in Vue helper functions

I am attempting to create a form in NodeJs to search for a user in MongoDB by their telephone number using query routing. However, I am puzzled as to why this is not functioning properly

Get a Blob as a PNG File

Discover the Practical Utility of Maps beyond Hash Tables in Everyday Life

I am having trouble figuring out the issue with the state and how to properly implement it in Typescript