Canvas 在GitHub上点星最高的框架Fabricjs 彩弹（工作篇）

Canvas 在GitHub上点星最高的框架Fabricjs 彩弹（工作篇）

这里我想记录我在工作中遇到的那些坑

很多时候，做着做着事情想温柔的说一句MMP的时候，应该想想，说出来可能会影响别人，写下来才能增长技能，（有点押韵所以加粗了，怕你们看不到我的才华）所以真心希望大家能多谢博客，把大家懂得知识分享出来，利人利己，不多BB开始干货搞起！！！

1、老陈说，来实现一个多点的闭合连接图

想到闭合的连接图，马上想到我的Fabricjs中有一个Polygon的图形组件，一想到这个组件，我的手就开始痒起来了，脑袋还没反应过来，手就已经在键盘上打完了代码，完成之后还有点意犹未尽。

<canvas id="c" width="1920" height="1080">请使用支持HTML5的浏览器</canvas>

//初始化
var canvas = new fabric.Canvas("canvas", {
	isDrawingMode: true,
   skipTargetFind: false,
	controlsAboveOverlay:true
 });

function createPolygon(path){
	path = path == null?contentPath : path
	return new fabric.Polygon(path, {
	  stroke: color,
	  strokeWidth: drawWidth,
	  fill: "rgba(255, 255, 255, 0)",
	  hasBorders : false,
	  hasControls : false,
	  type:"polygon",
	  lockMovementY:true,
	  lockMovementX:true,
	  preserveObjectStacking:true
	});
}
//绘制
function drawing() {
	switch (drawType) {
	//..................之前别人写的
	  case "polygon":
		if(contentPath.length == 0){
			contentPath.push({x:mouseFrom.x,y:mouseFrom.y})
			canvasObject = new fabric.Polygon(contentPath, {
			  left: left,
			  top: top,
			  stroke: color,
			  strokeWidth: drawWidth,
			  fill: "rgba(255, 255, 255, 0)",
			});
		}else{
			contentPath.push({x:obj.x1,y:obj.y1})
			canvasObject = new fabric.Polygon(contentPath, {
			  left: left,
			  top: top,
			  stroke: color,
			  strokeWidth: drawWidth,
			  fill: "rgba(255, 255, 255, 0)"
			});
		}
		break;
      default:
		
        break;
    }
	
    if (canvasObject != null) {
      // canvasObject.index = getCanvasObjectIndex();
      canvas.add(canvasObject); //.setActiveObject(canvasObject)
      drawingObject = canvasObject;
    }
}

效果图：

**老陈：对效果还行，但是 数据量太大 **，能不能画的时候限定长度呢？比如说鼠标移动20像素再定点。。

**我：**好的没问题！！工资能涨涨不？

老陈老陈点了点头，我马上心里一痒，忍不住的码了起来

	function juli(form) {       // 从form的表单中分别提取两个点的横、纵坐标
		var x1 = eval(form.x1);   // 第一个点的横坐标
		var y1 = eval(form.y1);   // 第一个点的纵坐标
		var x2 = eval(form.x2);   // 第二个点的横坐标
		var y2 = eval(form.y2);   // 第二个点的纵坐标
		var xdiff = x2 - x1;            // 计算两个点的横坐标之差
		var ydiff = y2 - y1;            // 计算两个点的纵坐标之差
		return Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);   // 计算两点之间的距离，并将结果返回表单元素
	}

//...

	var length = juli(obj)
	console.log(length);
	
	if(length > 10){
		contentPath.push({x:mouseTo.x,y:mouseTo.y})
		canvasObject = new fabric.Polygon(contentPath, {
		  left: left,
		  top: top,
		  stroke: color,
		  strokeWidth: drawWidth,
		  fill: "rgba(255, 255, 255, 0)"
	});
//...

效果图（明显可以看到顿感）：

老陈：小伙子不错嘛！！但是这个修改如果直接修改整体大小满足不了需求啊，必须要拖动每个节点才行，对你来说应该很简单吧？我给你找个实例；http://fabricjs.com/stickman，就是这种效果哟！！

我：当然，对我来说小菜一碟，但是工资的事情。。。^ ^

老陈：钱不是问题！

实例是这样的每个点拖动都能改变线条的长度：

感觉挺简单是吧，关键我们公司这个fabricjs是和另一个组件一起用的，因为咱们这个背景图是很大的图片，加载非常慢，所以用了另外一个js插件去实现了大图切片部分刷新的功能，这个组件名字叫openseadragon，所以两个软件用起来有冲突，我按照API上改了一版发现生成点后，拖动点线条就变得断断续续了。

api 就不给大家展示了，到时候大家去地址上看
后来找到解决方案，每次移动鼠标的时候删除原有的对象，再生成一个添加进去，完美解决这个问题。

canvas.on("object:moving",function(e){
	var element = e.target
	if(element.type == "point"){
		var temp = po.points
		temp[element.index].x = element.left;
		temp[element.index].y = element.top;
		//重点如下
		po.remove()
		po = createPolygon(temp)
		po.selectable = false
		overlay.fabricCanvas().add(po)
	}else if(element.type == "polygon"){
		if(tags != null && tags.length > 0){
			tags.forEach(item=>item.remove())
		}
	}
})

效果（非常之优秀）：

但是有个问题，就是生成完这些圆点之后很难点到这些圆点，原因找了好，原来点击完一个对象之后，那个东西就会默认到最上层来，导致把这些点的位置都挡住了。于是加一句配置代码，ps：这句代码在官方文档中找了好久才找到。就是默认点击不在最上面。

	canvas.preserveObjectStacking = true

我：老陈我弄完了！！

老陈 我就知道你一定可以的！来把对象实例化，存到数据库里面。

我：必须滴！！

读数据很简单，关键是实例化数据坑很多！！

这俩方法的意思是重新加载数据,也就是说会去掉画布上所有之前画的对象，去实例化你json数据里面的对象，而我要的功能是在原有的基础上添加json里面的所有对象，最后找到一个方法。

	$("#getData").click(function(){
			
		$.get("js/data.json",(data)=>{
			fabric.util.enlivenObjects(data.objects, function(objects) {
			    var origRenderOnAddRemove = canvas.renderOnAddRemove;
			    canvas.renderOnAddRemove = false;
			 
			    objects.forEach(function(o) {
			    	// canvas.moveTo(o, 200);
					console.log(o)
					canvas.add(o);
					if(o.type == 'polygon'){
						o.hasBorder=false
						o.hasControls=false
						o.lockMovementY=true
						o.lockMovementX=true
						o.preserveObjectStacking=true
					}
			        
			    });
			    canvas.renderOnAddRemove = origRenderOnAddRemove;
				canvas.renderAll();
			});
		})
	})

叫后端人员去写前端代码，真的是裤裆里面挂镰刀的事情啊，杂家再也不想写前端了。。。更气的是！！

我：老陈啥时候给我长工资呀？

老陈 ：其实我只是个前端程序猿！！

都怪我太年轻o(╥﹏╥)o