基于canvas的绘图工具fabric.js
###下面是canvas fabric.js的用法
锁住
1 lockMovementX lockMovementY lockRotation 2 lockScalingX lockScalingY
###选中元素时去掉连接线
1 object.hasBorders = false;
###选中元素时去掉四边的框
1 object.hasControls=false;
###设置选中元素时的样子
1 object.set({ 2 borderColor: 'red', 3 cornerColor: 'green', 4 cornerSize: 6 5 });
###设置元素不能被操作
1 Object.selectable=false;
###设置背景图
1 canvas.setBackgroundImage('img/golfball.png',canvas.renderAll.bind(canvas));
###设置背景透明显示
1 canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
###事件
mouse:up mouse:move mouse:dowm
object:modified object:moving object:selected object:scalig object:rotating
before:selection:cleared selection:cleared
after:render
"path:created" "object:added" "object:removed"
###添加线
1 var line = new fabric.Line([10, 10, 100, 100], { 2 fill: 'green', 3 stroke: 'green' 4 }); 5 canvas.add(line);
###添加矩形
1 var canvas = new fabric.Canvas('c'); 2 var rect = new fabric.Rect({ 3 left: 100, 4 top: 100, 5 fill: 'red', 6 width: 20, 7 height: 20 8 }); 9 canvas.add(rect);
###移动到指定位置
1 rect.set({ left: 20, top: 50 }); 2 canvas.renderAll();
###设置一些属性
1 rect.set('fill', 'red'); 2 rect.set({ strokeWidth: 5, stroke: 'rgba(100,200,200,0.5)' }); 3 rect.set('angle', 15).set('flipY', true);
###添加圆和三角形
1 var circle = new fabric.Circle({ 2 radius: 20, fill: 'green', left: 100, top: 100 3 }); 4 var triangle = new fabric.Triangle({ 5 width: 20, height: 30, fill: 'blue', left: 50, top: 50 6 }); 7 canvas.add(circle, triangle);
###椭圆
1 var ellipse = new fabric.Ellipse({ 2 rx: 45, 3 ry: 80, 4 fill: 'yellow', 5 stroke: 'red', 6 strokeWidth: 3, 7 angle: 30, 8 left: 100, 9 top: 100 10 }); 11 canvas.add(ellipse);
###Canvas中操作一些元素的方法
1 var canvas = new fabric.Canvas('c'); 2 var rect = new fabric.Rect(); 3 canvas.add(rect); // add object 4 5 canvas.item(0); // reference fabric.Rect added earlier (first object) 6 canvas.getObjects(); // get all objects on canvas (rect will be first and only) 7 8 canvas.remove(rect); // remove previously-added fabric.Rect
版权声明:本文为751466189xf原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。