fabricjs/fabric.js

qrDecompose.angle does not match obj.angle with flipX applied

Open

#5,079 opened on Jun 29, 2018

View on GitHubContributor guide
 (8 comments) (0 reactions) (0 assignees)TypeScript (3,621 forks)batch import
help wanted

Repository metrics

Stars
 (31,387 stars)
PR merge metrics
 (Avg merge 27d 13h) (10 merged PRs in 30d)

Description

Version

2.3.3

Test Case

Go to http://fabricjs.com/matrix-transformation and run this script in console:

var obj = __canvas.item(0);
function testObject() {
  var transformValues = fabric.util.qrDecompose(obj.calcTransformMatrix());
  var match = obj.angle === transformValues.angle;
  console.log(match ? 'yes' : 'NO', obj.angle, transformValues);
}
testObject(); // obj.angle and matrix.angle match
obj.flipX = true;
__canvas.requestRenderAll();
setTimeout(testObject, 100); // obj.angle correctly zero. matrix.angle is now 180

Steps to reproduce

Run the script above or:

  1. add an object to canvas. obj.angle will be zero. calcTransformMatrix + qrDecompose angle will be zero
  2. obj.flipX = true; requestRenderAll()
  3. obj.angle remains zero. qrDecompose now returns 180

Expected Behavior

fabric.util.qrDecompose(obj.calcTransformMatrix()).angle and obj.angle should both equal zero, or qrDecompose shouldn't return an angle property if it can't return an accurate value.

Actual Behavior

After the flip is applied, the result from qrDecompose is 180.

If qrDecompose can't be used this way, what is the recommended way to get the ungrouped object properties from a selection's object:modified event?

Contributor guide

Research direction
Investigate the qrDecompose function in fabric.js to understand why flipX causes a 180 degree angle shift. Check how the decomposition handles skew and scale signs, and consider if the angle should be adjusted to remain consistent with the object's angle property or if the documentation should be updated to clarify the behavior.
Tech stack
javascript
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
JavaScriptMatrix transformations
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70