Fabric.js介绍
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
Fabric.js是什么Fabric.js能做什么为什么使用Fabric.js// 获取canvas元素 var canvasEl = document.getElementById('c'); // 获取上下文 var ctx = canvasEl.getContext('2d'); // 设置填充颜色 ctx.fillStyle = 'red'; // 在100,100点创建20x20的矩形 ctx.fillRect(100, 100, 20, 20); // 创建原生canvas元素的包装类(‘c’canvas元素的id) var canvas = new fabric.Canvas('c'); // 创建一个矩形对象 var rect = new fabric.Rect({ left: 100, top: 100, fill: 'red', width: 20, height: 20 }); // 添加矩形到画布上 canvas.add(rect); // 擦除之前的矩形(这里是擦除了整个canvas区域) ctx.clearRect(0, 0, canvasEl.width, canvasEl.height); // 重新绘制矩形 ctx.fillRect(20, 50, 20, 20); 听起来是不是很蹩脚?是的,使用Canvas原生方法时,就像是个带橡皮檫的笔刷,在画布上绘制图形时,是笔刷在画布上移动,绘制出的图形就是笔刷移动的整个痕迹,而想把绘制好的图形移动到其他地方,只好用橡皮檫擦掉,然后在新位置重新绘制。 rect.set({ left: 20, top: 50 }); canvas.renderAll(); Canvas对象var canvas = new fabric.Canvas('...') var canvasElement = document.getElementById(canvasEle); var ctx = canvasElement.getContext("2d"); fabric.Canvas对象负责管理画布上绘制的所有对象,可以将对象添加到fabric.Canvas对象,也可以从fabric.Canvas获取或删除对象。 var canvas = new fabric.Canvas('c'); var rect = new fabric.Rect(); canvas.add(rect); // 添加对象 canvas.item(0); ///获取之前添加的fabric.Rect(第一个对象) canvas.getObjects(); ///获取画布上的所有对象(rect将是第一个也是唯一一个) canvas.remove(rect); ///删除之前添加的对象删除 var canvas = new fabric.Canvas('c', { backgroundColor: 'rgb(100,100,100,200)', selectionColor:'blue', selectLineWidth: 2 // ... }); // 或 var canvas = new fabric.Canvas('c'); canvas.setBackgroundImage('http://...'); canvas.onFpsupdate = function(){ /* ...... */ }; // ... canvas.renderAll(); fabric.Circle fabric.Ellipse fabric.Line fabric.Polygon fabric.Polyline fabric.Rect fabric.Triangle 创建var line = new fabric.Line([x1, y1, x2, y2], { strokeWidth: 2, //线宽 stroke: rgba(255,0,0,0.8), //线的颜色 selectable: false }); canvas.add(line); var circle = new fabric.Circle({ radius: 2, left: left, top: top, originX: 'center', originY: 'center', fill: rgba(0,200,0,0.8), strokeWidth: 1, stroke: rgba(255,0,0,0.8), selectable: false }); canvas.add(circle); 控制fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center' line.left = pointer.x; line.top = pointer.y; line.set('stroke', startColor); line.set('height', 20); Image对象fabric.Image.fromURL('my_image.png', function(oImg) { // scale image down, and flip it, before adding it onto canvas oImg.scale(0.5).set('flipX, true); canvas.add(oImg); }); Path对象var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z'); path.set({ left: 120, top: 120 }); canvas.add(path); ... var path = new fabric.Path('M 0 0 L 300 100 L 200 300 z'); ... path.set({ fill: 'red', stroke: 'green', opacity: 0.5 }); canvas.add(path); Events事件var canvas = new fabric.Canvas('...'); canvas.on('mouse:down', function(options) { console.log(options.e.clientX, options.e.clientY); }); canvas.on('mouse:down', function(options) { if (options.target) { console.log('一个对象被点击了!', options.target.type); } }); var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' }); rect.on('elected', function() { console.log('选择了一个矩形'); }); var circle = new fabric.Circle({ radius: 75, fill: 'blue' }); circle.on('selected', function() { console.log('选择了一个圆圈'); }); Groups组var circle = new fabric.Circle({ radius: 100, fill: '#eef', scaleY: 0.5, originX: 'center', originY: 'center' }); var text = new fabric.Text('hello world', { fontSize: 30, originX: 'center', originY: 'center' }); var group = new fabric.Group([ circle, text ], { left: 150, top: 100, angle: -10 }); canvas.add(group); group.item(0).set('fill', 'red'); group.item(1).set({ text: 'trololo', fill: 'white' }); Serialization序列化toObject, toJSONvar canvas = new fabric.Canvas('c'); JSON.stringify(canvas); // '{"objects":[], "background": "rgba(0,0,0,0,0)"}' canvas.add(new fabric.Circle({ left: 100, top: 100, radius: 50, fill: 'red' })); console.log(JSON.stringify(canvas)); '{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null, "scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false, "transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0},{"type":"circle","left":100,"top":100,"width":100,"height":100,"fill":"red", "overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1, "selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"radius":50}],"background":"rgba(0, 0, 0, 0)"}' toSvgcanvas.add(new fabric.Rect({ left: 50, top: 50, height: 20, width: 20, fill: 'green' })); console.log(canvas.toSVG()); <?xml version="1.0" standalone="no" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="700" xml:space="preserve"> <desc>created with Fabric.js 0.9.21</desc> <rect x="-10" y="-10" rx="0" ry="0" width="20" height="20" style="stroke: none; stroke-width: 1; stroke-dasharray: ; fill: green; opacity: 1;" transform="translate(50 50)" /> </svg> Deserialization反序列化, SVG Parser SVG解析器var canvas = new fabric.Canvas(); canvas.loadfromJSON('{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null, "scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true, "perPixelTargetFind":false,"rx":0,"ry":0},{"type":"circle","left":100,"top":100,"width":100,"height":100,"fill":"red","overlayFill":null,"stroke":null,"strokeWidth":1, "strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true, "hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"radius":50}],"background":"rgba(0, 0, 0, 0)"}'); 下移:canvas.sendBackwards(obj) 上移:canvas.bringForward(obj) 置顶:canvas.bringToFront(obj) 置底:canvas.sendToBack(obj) 更多资源该文章在 2023/5/23 11:21:46 编辑过 |
关键字查询
相关文章
正在查询... |