1
\$\begingroup\$

The skew property of a bitmap in EaselJS (given as angle) rotates the image such that it also flattens. I'd like to skew it without "squashing" it, as canvas does.

JSFiddles, to demonstrate:

Canvas skew | EaselJS skew

canvas skew EaselJS skew

\$\endgroup\$
1
\$\begingroup\$

Ah, an unfortunate side effect of EaselJS being too clever. You can undo the cleverness by vertically scaling the resulting shape by the ratio of the desired height h2 to the actual height h1 that Easel calculated for you.

Here's a diagram to go help think about the trigonometry:

The required trig

I modified your JSFiddle to demonstrate how it might look in code. The important parts:

function degToRad(angle) {
    return angle * Math.PI / 180;
}

var angle = -35;
var shouldBeHeight = 80;
var isHeight = 80 * Math.abs(Math.cos(degToRad(angle)));
var heightRatio = shouldBeHeight / isHeight;

...

skewedShape.scaleY = heightRatio;

How it looks now, rendered with EaselJS.

\$\endgroup\$
  • \$\begingroup\$ Great, thanks. In the mean time I build some solution that uses the Matrix2D from easelJS and applied it to the canvas context. But it's good to have a way to solve it with easelJS. \$\endgroup\$ – Tarion May 10 '14 at 22:51
  • 1
    \$\begingroup\$ Little visualization: jsfiddle.net/Bpz88/592 \$\endgroup\$ – Tarion May 10 '14 at 22:52
  • \$\begingroup\$ @Tarion Does your method involve trig too? If not, it might be faster, which can be a big plus in render calls. (You could add it as another answer. It's OK to post answers to your own questions too.) \$\endgroup\$ – Anko May 10 '14 at 22:57
  • \$\begingroup\$ Ok it's not tested code I took it from my code that is still in progress and therefore somehow messy ;) \$\endgroup\$ – Tarion May 11 '14 at 11:00
1
\$\begingroup\$

Just to provide and example how to use the easel Matrix2D to archive the skew:

var ctx = canvas.getContext("2d");
ctx.save();
var matrix = new createjs.Matrix2D();
var tile = new createjs.Bitmap('img/tile.png');
matrix.prepend(
            1, 0.5, // the 0.5 is the skewing
            0, 1,
            0, 0);
tile.draw(ctx);
ctx.restore();

But then you can not rely on the easel update mechanism but you must do this yourself whenever you need to render it.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.