Fix immediate renderer image and text rotation in rotated canvas #14333
Conversation
|
📦 Preview the website for this branch here: https://deploy-preview-14333--ol-site.netlify.app/. |
(handle null/undefined transform to avoid breaking unrelated tests)
mike-000
force-pushed
the
image/text-rotation
branch
from
2cfea98
to
45ddfde
Compare
| * @private | ||
| * @type {number} | ||
| */ | ||
| this.transformRotation_ = transform |
There was a problem hiding this comment.
Something looks wrong here. transform is a transform matrix, not a number.
There was a problem hiding this comment.
The rotation is the number. I first check that the transform is not undefined or null (which is should never be) as several browser tests which create a CanvasImmediateRenderer without using drawImages_ or drawText_ fail if they attempt to access entries from a missing matrix.
| @@ -83,6 +84,14 @@ class CanvasImmediateRenderer extends VectorContext { | |||
| */ | |||
| this.transform_ = transform; | |||
There was a problem hiding this comment.
Here you apply the transform...
| * @private | ||
| * @type {number} | ||
| */ | ||
| this.transformRotation_ = transform |
There was a problem hiding this comment.
... and here you apply the same transform, but the type says number. If you want the rotation here, you need to extract it from the transform, or assign null initially and note that in the type.
There was a problem hiding this comment.
That is not the end of the statement. I check if the transform exists before extracting from it.
Fixes the inconsistent rotations observed in #14308 (comment)
Subtract canvas rotation from image or text rotation so it does not automatically rotate with the view (or double that rotation if
rotateWithViewis specified).Replace circle style with triangle in rendering tests so any incorrect image rotation can be seen.