fabric.js图片圆角方法(测试)

来源:互联网 发布:微信看不到淘宝链接 编辑:程序博客网 时间:2024/05/18 02:17

一种:缩放图片尺寸,外面贴图圆角,需要图片颜色和圆矩颜色一致,不然图片还是方形的

    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); 
原创粉丝点击