Question

我想用图像填充这个圆形矩形。我正在使用位图填充。

            var stage = new createjs.Stage("canvas");
            var layoutWidth = 0.8 * stage.canvas.width;
            var layoutHeight = 0.6 * stage.canvas.height;
            var layoutRect = new createjs.Shape();
            var image = new createjs.Bitmap("insta.png");
            image.image.onload=function(){
                    layoutRect.graphics.beginStroke("black").beginBitmapFill(image.image).drawRoundRect((stage.canvas.width - layoutWidth) / 2, (stage.canvas.height - layoutHeight) / 2, layoutWidth, layoutHeight,20);
                    stage.update();
            }
            stage.addChild(layoutRect);
            stage.update();

如何使用一个图像完全填充此形状而不重复。我希望一个图像占据整个形状的空间。

Answer 1

您可以在填充上使用矩阵变换来影响图像填充的缩放和平移。

var m = new createjs.Matrix2D();
m.translate(x, y);
m.scale(targetWidth/imageWidth, targetHeight/imageHeight);
graphics.beginBitmapFill(img, "no-repeat", m);

以下是基于您的代码的示例小提琴：http://jsfiddle.net/x0oqrkwv/

如果要保持纵横比，则必须添加逻辑来执行此操作。

如何在没有重复的情况下完全用图像填充画架中的形状？

1 个答案: