1. 程式人生 > >fabric.js圖片圓角方法(測試)

fabric.js圖片圓角方法(測試)

一種:縮放圖片尺寸,外面貼圖圓角,需要圖片顏色和圓矩顏色一致,不然圖片還是方形的

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

二種:

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