我正在努力使EaselJS中的图像变为圆形。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()
}
})()
预先感谢您帮助我弄清楚如何修复我的代码,或者如果我在这里错误的路径。
更新:我原来问过这个问题做一个圆的图像,或带有圆角的图像。我真的只需要圆形图像方法,因为提供的答案只针对这一点,所以我删除了我的问题,并要求提供圆角解决方案。
面具是伟大的(也是最高性能),但请注意,它不会在Chrome中进行抗锯齿。位图填充方法解决了这个问题。 – Lanny
我真的更喜欢这种面具方法,但这仍然会导致我尝试移动x/y位置时遇到的相同问题:[jsfiddle示例](https://jsfiddle.net/skplunkerin/2tsym49r/2/)。任何想法如何也解决@derz? – skplunkerin
也@derz,你的jsfiddle需要更新,以符合你的代码:)(也可以添加createjs脚本包括所以它的工作原理) – skplunkerin