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); 
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值