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);
阅读全文
0 0
- fabric.js图片圆角方法(测试)
- Fabric.js
- mysql fabric HA测试
- MYSQL FABRIC 分片测试
- Fabric.js的学习
- Fabric.js学习笔记
- 构建hyperledger fabric测试和运行环境(最新版)
- hyperledger fabric v1.0安装测试(ubuntu)
- Mysql Fabric HA配置测试
- js预览图片,测试火狐
- Hyperledger fabric配置node.js
- canvas fabric.js api梳理
- fabric
- fabric
- fabric
- Fabric
- fabric
- fabric
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">是什么意思?
- Unity中修改相机各个Layer的照射视距
- 算法导论:c++快速排序
- Scala语言入门之环境配置
- 自定义圆角
- fabric.js图片圆角方法(测试)
- CodeForces
- Hibernate的学习之路十四(事务)
- Spring Cloud学习笔记4——服务容错保护Hystrix
- AI GOD:1013: 小英的咖啡厅
- window下面使用protobuf
- Haskell语言学习笔记(45)Profunctor
- NBUT 1619
- C语言指针详述