fabric.jsピクチャフィレット方法(テスト)
7006 ワード
1つ:画像のサイズをスケールして、外のマップの円角、画像の色と円のモーメントの色が一致する必要があります.そうしないと、画像は四角です.
2つ:
直接画像を追加し、操作しない
var rect = new fabric.Rect({
left:0,
top:0,
fill: 'white',//
originX:'center',
originY: 'center',
width: img.width,
height: img.height,
rx: 10,
ry: 10,
hasControls: true
});
rect.setGradient('fill', {
x1: 0,
y1: 0,
x2: rect.width,
y2: 0,
colorStops: {
0: "red",
0.2: "orange",
0.4: "yellow",
0.6: "green",
0.8: "blue",
1: "purple"
}
});
var img1 = img.set({
width: img.width-20,
height: img.height-20,
originX:'center',
originY: 'center'
});
var group = new fabric.Group([ rect, img1 ], {
left: 0,
top: 0
});
canvas.add(group);2つ:
var objImg = null;
fabric.Image.fromURL(data, function(oImg) {
oImg.set({
width: 280,
height: 200,
left: 210,
top: 146,
originX: 'center',
originY: 'center',
selectable: true,
perPixelTargetFind: true,
transparentCorners: false
});
canvas.setActiveObject(oImg);
objImg = canvas.getActiveObject();
objImg.clipTo = function(ctx) {
console.log("ctx");
console.log(ctx);
/* ctx.rect(
0,
0,
-140,
-100
); *//
//ctx.arc(0, 0, 100, 0, Math.PI * 2, true);//
ctx.ellipse(0,0,170,140,0,Math.PI * 2, false);// ， 。
};
canvas.add(oImg);
});直接画像を追加し、操作しない
oImg.width=280;
oImg.height=200;
oImg.top = 55;
oImg.left = 93;
oImg.setControlsVisibility({
'mt' : false,
'tl' : false,
'bl' : false,
'mr' : false
});
oImg.set({
borderColor: 'green',
cornerColor: 'orange',
cornerSize: 8,
transparentCorners: false
});
canvas.setActiveObject(oImg);
canvas.add(oImg);