EaselJS 图像创建为圆形

Question

我正在努力使 EaselJS 中的图像变成圆形。

基本上，我正在寻找 EaselJS 中 border-radius 的 CSS3 等价物，但找不到解决方案。

我最接近的是创建一个圆形形状，并向其添加一个 BitmapFill...我看到的问题是 BitmapFill 卡在了一个(0, 0) x/y 位置在圆形 Shape 后面，当我将 Shape 移动到图像大小以外的任何位置时，Bitmap 不跟随（或 snap) 到形状并随之移动。

查看我的Fiddle here

如果将圆 x 位置 更改为 50，它看起来很正常......但请注意圆如何远离 (50, 50) x/y Bitmap 落后而不是跟随的位置。

请参阅下文了解我的 HTML/CSS/Javascript 在 Fiddle 中的外观：

HTML:

<!-- CreateJS CDN -->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<canvas id="stage-canvas" width="300" height="300">
  This web browser does not support canvas.
</canvas>

CSS:

canvas {
  background-color: #FFF;
  display: block;
}

Javascript:

// Self running function (once page loads)
(function(){
  // preload image assets first with preloadJS
  // used from example here: http://createjs.com/docs/preloadjs/modules/PreloadJS.html
  var queue = new createjs.LoadQueue();
  queue.on("complete", loaded, this);
  queue.loadManifest([
     {id: "poke", src:"https://upload.wikimedia.org/wikipedia/en/f/f1/Bulbasaur_pokemon_red.png"}
  ]);

  // once images above preloaded, run this function:
  function loaded() {
    // Init Stage
    var stage = new createjs.Stage("stage-canvas")

    // Create Background
    var bg1 = new createjs.Shape()
    bg1.graphics.beginFill("ghostwhite") // first bg is white
    bg1.graphics.drawRect(
      0,                    // x position
      0,                    // y position
      stage.canvas.width,   // width of shape (in px)
      stage.canvas.height   // height of shape (in px)
    )
    // Can only define this after shape is drawn, else no fill applies
    bg1.graphics.ef()    // short for endFill()
    stage.addChild(bg1)  // Add Child to Stage

    // trying to create image to be circlular
    // this will add it as the background-image to a circle
    // but I'm having problems getting it to "snap" to the circle
    // instead of stuck at (0, 0) x/y position behind circle...?
    var circle = new createjs.Shape()
    circle.graphics.beginBitmapFill(
      queue.getResult("poke"), // image to be used as fill
      "no-repeat" // image repeating or not
    )
    circle.graphics.drawCircle(
      150, // x position
      50, // y position
      50 // diameter (in px)
    )
    stage.addChild(circle)

    stage.update()
    }
})()

预先感谢您帮助我弄清楚如何修复我的代码，或者如果我走错了路。

更新：我最初问这个问题是为了制作圆形图像，或者圆角图像。我真的只需要圆形图像方法，并且由于提供的答案仅针对此，所以我删除了我的问题也要求圆角解决方案。

Answer 1

将圆形Shape放入Container中，然后将Container移动到你想要的地方就可以了。这是目前我找到的唯一选项：

See this Fiddle

改变这个：

var circle = new createjs.Shape()
circle.graphics.beginBitmapFill(
  queue.getResult("poke"), // image to be used as fill
  "no-repeat" // image repeating or not
)
circle.graphics.drawCircle(
  150, // x position
  50, // y position
  50 // diameter (in px)
)
stage.addChild(circle)

为此：

var circle = new createjs.Shape()
circle.graphics.beginBitmapFill(
  queue.getResult("poke"), // image to be used as fill
  "no-repeat" // image repeating or not
)
circle.graphics.drawCircle(
  50, // x position
  50, // y position
  50 // diameter (in px)
)
// Create a container for the circle
var container = new createjs.Container()
container.x = 150
container.y = 150
container.addChild(circle) // add circle to container
stage.addChild(container) // then add container to stage

Answer 2

您可以在 Bitmap 上使用 mask 属性 (http://www.createjs.com/docs/easeljs/classes/Bitmap.html#property_mask) 来实现圆角。

var stage = new createjs.Stage(document.getElementById('canvas'));

var img = new Image();
img.onload = function() {
    var container = new createjs.Container();

    var bitmap = new createjs.Bitmap(img);
    bitmap.regX = bitmap.regY = 150;
    bitmap.y = bitmap.x = 150;

    var maskShape = new createjs.Shape(new createjs.Graphics().f("#000").drawCircle(150,150,150));
    bitmap.mask = maskShape;

    container.addChild(bitmap);

    stage.addChild(container);
    stage.update();

    container.x = container.y = 50;

    stage.update();
};
img.src = '//unsplash.it/300/300';

https://jsfiddle.net/2tsym49r/3/

编辑：正如 Lanny 所提到的，mask 正在使用 Canvas clip 方法，因此不会在 Chrome 中进行抗锯齿处理（打开错误）。如果您需要 Chrome 中的抗锯齿，您可以使用 compositeOperation 做一个解决方法，检查更新的 jsfiddle：https://jsfiddle.net/2tsym49r/4/

Answer 3

我建议将圆居中，并使用矩阵也将位图填充居中。

// Create a matrix
var matrix = new createjs.Matrix2D()
    .translate(-160/2, -144/2); // Move to 50% the width and height of the image

circle.graphics.beginBitmapFill(
  queue.getResult("poke"), // image to be used as fill
  "no-repeat",
  matrix // Pass in the matrix
);

// Draw the circle at 0,0
circle.graphics.drawCircle(
  0, // x position
  0, // y position
  50 // diameter (in px)
);

// Move it to wherever you want
circle.x = 100;
circle.y = 100;

这是更新后的 fiddle：https://jsfiddle.net/lannymcnie/md73ns53/

您还可以缩放矩阵以使图像适合圆。

EaselJS 图像创建为圆形

EaselJS Image created as circle

canvas

html5-canvas

easeljs

createjs