EaselJS將圖像創建爲圓形

Question

我正在努力使EaselJS中的圖像變爲圓形。

基本上，我正在尋找EaselJS中的border-radius的CSS3等價物，並且找不到解決方案。

我得到的最接近的是創建一個圓形狀，並添加一個BitmapFill它...我看到的問題是BitmapFill被卡在一個(0, 0) x/y位置後面的圓Shape ，並且當我將Shape移動到圖像大小以外的任何位置時，Bitmap不會跟隨（或管理單元）並隨之移動。

---

檢查我Fiddle here

如果你改變了圈x位置到50，它看起來normal'ish ......但要注意如何從(50, 50) X/Y軸移動進一步的圈走了Bitmap落後，而不是跟隨。

請參閱以下我的HTML/CSS/JavaScript的如何看待在小提琴：

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

可以使用mask屬性（http://www.createjs.com/docs/easeljs/classes/Bitmap.html#property_mask）Bitmap至實現圓角。

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/

編輯： 如蘭尼mask提到使用畫布clip方法，因而不會在瀏覽器（開放缺陷）進行去混疊。如果您在Chrome需要抗鋸齒你可以使用compositeOperation一種解決方法，檢查更新的jsfiddle：https://jsfiddle.net/2tsym49r/4/

Answer 2

將圓形放入容器，然後將容器移動到您想要的位置。這是目前我發現的唯一選擇：

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 3

我會建議爲中心的圈子，並用一個矩陣來也陸續BitmapFill會。

// 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; 

這裏是一個更新的小提琴：https://jsfiddle.net/lannymcnie/md73ns53/

你也可以縮放矩陣，使圖像適合圓。