FabricJS 用户自定义的位置背景图片

FabricJS 用户自定义的位置背景图片

应用场景:在做一个图形和文本及背景的设计器,然后用户通过导入Excel数据结合设计的模板来生成最终想要的图纸,打印出来以便给工人看,在公司大佬的建议下使用了FabricJS,但是在导入背景(底图)的过程中,自动生成的位置,客户总是不满意,所以干脆让他自己拖~~

获取用户上传的图片资源,用于保存显示

 	var objURL = null;//获取安全模式下的图片真实路径(仅base64)$(document).on('change', '#inputGroupFile02', function () {//console.log(this.files[0]);function getObjectURL(file) {var url = null;if (ateObjcectURL != undefined) {url = ateOjcectURL(file);} else if (window.URL != undefined) {url = ateObjectURL(file);} else if (window.webkitURL != undefined) {url = ateObjectURL(file);}return url;}//返回input file的真实路径---base64objURL = getObjectURL(this.files[0]);});

		// 读取图片地址，设置画布背景,objURL是用户上传的图片资源fabric.Image.fromURL(objURL, (img) => {var tscaleX = (canvas.height < canvas.width ? canvas.height : canvas.width) / (img.height < img.width ? img.height : img.width);var tscaleY = (canvas.height < canvas.width ? canvas.height : canvas.width) / (img.height < img.width ? img.height : img.width);if ((tscaleX * img.width) > canvas.width) {var rscalex = canvas.width / img.width;var imgscale = img.height / img.width;var rscaley = ((rscalex * img.width) * imgscale)/img.height;//再次缩放tscaleX = rscalex;tscaleY = rscaley;}img.set({// 通过scale来设置图片大小，这里设置和画布一样大scaleX: tscaleX,scaleY: tscaleY});canvas.add(img.set({// 通过scale来设置图片大小，这里设置和画布一样大scaleX: tscaleX,scaleY: tscaleY,type: 'img'}));// 设置背景白色canvas.setBackgroundColor("white");// 设置背景,直接设置canvas.setBackgroundImage(img, derAll.bind(canvas));derAll();});

发现一个神奇的现象,不知道为什么,直接设置背景之后还是可以拖动的,然后再删除target这个对象时,居然直接再拖动好的位置设置背景了,阴差阳错的实现了,记录一下~