CODEWITHSUNDEEP
javascriptrotationfabricjs
emaybert
emaybert

Reputation: 1

fabric.js - Rotate "Child" Object based on Parent w/o Grouping

Using fabric.js (1.7.11) , I am trying to have one object follow the rotation of another without grouping them, and while maintaining the relative position of the child object to the parent. So I believe I need to (1) set the rotation center of the "child" object to that of the "parent", then (2) as the parent object is rotating, apply that rotation delta to the child ( which may already start in a rotated state ). The end result is such that the child appears "stuck" to the parent ( like a sticky-note on a game-board, and you then rotate the game-board )

Here is the pseudo-code

canvas.on('object:rotating', canvasEvent_ObjectRotating);

function canvasEvent_ObjectRotating(e)
{
    // set r2'2 center of rotation = r1's center of rotation

    // r2.angle += ( delta of rotation of r1 angle ) 

}

Here is a fiddle:

https://jsfiddle.net/emaybert/bkb5awj6/

Any help with 1 or 2 would be appreciated. Either how to get the angle delta in the object:rotating callback, and/or how to pivot a object around an arbitrary point. I've seen the reference to fabric.util.rotatePoint and an example of how to rotate a Line using it, but not an object, and couldn't make that mental transformation.

Upvotes: 0

Views: 857

Answers (1)

Logan
Logan

Reputation: 267

Is this something that you're trying to do? https://jsfiddle.net/logie17/ofr8e6qd/1/

function canvasEvent_ObjectRotating(e)
{
  origX = r2.getCenterPoint().x;
  origY = r2.getCenterPoint().y;
  let topLeftPoint = new fabric.Point(origX, origY);

  if (!previousAngle) {
    previousAngle = r1.getAngle();
  }
  let angle = fabric.util.degreesToRadians(r1.getAngle() - previousAngle);
  previousAngle = r1.getAngle();
  let center = r1.getCenterPoint();
  let origin = new fabric.Point(r1.left, r1.top);
  let newCoords = fabric.util.rotatePoint(topLeftPoint,origin,angle);

  r2.set({ left: newCoords.x, top: newCoords.y }).setCoords();
}

Upvotes: 0

Related Questions