Movie clip scaling inaccurately in HTML5 canvas

Question

Since I read that HTML5 Canvas doesn't support 9-slice scaling, I thought I'd code it myself. I use two rectangles (rect_horiz and rect_vert) and four circles (corner_0, corner_1 etc.), and the shapes overlap, and should theoretically produce a pretty rounded rectangle. It seems to almost work, but I'm getting weird inaccuracies in the graphics, on the top and left edges (the bottom right corner came out as hoped).

To keep this post simple, here is just the code for rect_horiz (the rectangle that stretches across the entire width of the rounded rectangle I'm trying to create) and corner_0 (the top left corner). The movie clip roundRect contains these two movie clips. In the library, the circle is exactly 50 px across, and the rectangle is exactly 10px x 10px. Neither one has a stroke.

The idea in this example is to create a rounded rectangle programmatically with width 500 and height 100. Again, this is just a piece of the code, but if it worked correctly, in the resulting graphics (green shapes shown in screenshot from browser, below), the left edge of the rectangle should be flush with the left edge of the circle. Instead, the circle sticks out to the left by several pixels. (The same problem occurred with rect_vert which I had intended to fill the top white gap, but I omitted that rect here for brevity).

(Note: "fixOrigin" follows the recommended method to deal with the problem that "CreateJS returns Transformation Point in instead of movieclip's x,y properties" (https://community.adobe.com/t5/animate-discussions/createjs-returns-transformation-point-in-instead-of-movieclip-s-x-y-properties/m-p/11314847) and that approach has worked fine for me elsewhere.)

I feel like there must be some kind of rounding error in how the scaling is being applied here? Is there a way to fix this problem?

var width = 500;
var height = 100;
var cornerRadius = 25;
var unitSize = 10;

fixOrigin(this.roundRect);
fixOrigin(this.roundRect.rect_horiz);
fixOrigin(this.roundRect.corner_0);

this.roundRect.rect_horiz.x = 0;
this.roundRect.rect_horiz.y = cornerRadius;
this.roundRect.rect_horiz.scaleX = width/unitSize;
this.roundRect.rect_horiz.scaleY = (height - 2 * cornerRadius) / unitSize;

this.roundRect.corner_0.x = 0;
this.roundRect.corner_0.y = 0;

function fixOrigin (mc) {
mc.x -= mc.regX;
mc.y -= mc.regY;
mc.regX = 0;
mc.regY = 0;
}

JoãoCésar17023019 · Accepted Answer

Hi. Congrats on your progress. Alternatively, have you tried the ScaleBitmap class?http://blog.createjs.com/scaling-and-stretching-with-the-scalebitmap-class/ Please let us know. Regards,JC

Leif5FDE · Answer

Aha, I found a better fix.  I was able to make it work with my original method (just 2 rectangles overlapping like a Swiss cross, plus the 4 circles for corners).  Simply start with really huge squares, like 1000px x 1000px.  So unitSize = 1000, using my original code in the OP.  Lo and behold, the scaled shapes line up perfectly, no doubt because any "error" in the positioning of the scaled shapes is trivial in comparison to their starting size.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded