fabric.js画布中两个人物图标 同步移动
图片中每次都是第一个图片移动完，第二个图片才会移动，我想让他们同时间移动，想知道用什么方法解决这个问题。目前用的是两个for 循环各自的坐标来实现移动的 ????。请求大佬指点一下。
<script> import { fabric } from "fabric"; import Axios from "axios" // import Axios from 'axios'; // import ppp_ from './img/ppp.png'; export default { name: "index", data() { return { setfenceVisible:false, options: [ ], a_opacity: 1, canvas_v: null, pathData: [ { data: { data_position: null, data_status: { }, }, }, ], value: "", }; }, mounted() { this.canvasDrawLine(); this.getPathData(); }, methods: { //电子围栏配置 setElec_fence(){ this.setfenceVisible=true }, //姓名标签显示 name_handleClick(e) { if (this.a_opacity == 1) { this.canvas_v.setActiveObject()._objects[1].set("opacity", 0.8); this.a_opacity = 0; } else { this.canvas_v.setActiveObject()._objects[1].set("opacity", 0); this.a_opacity = 1; } this.handleClick(e); }, //心率标签显示 xl_handleClick(e) { if (this.a_opacity == 1) { this.canvas_v.setActiveObject()._objects[2].set("opacity", 0.8); this.a_opacity = 0; } else { this.canvas_v.setActiveObject()._objects[2].set("opacity", 0); this.a_opacity = 1; } this.handleClick(e); console.log(this.canvas_v.setActiveObject()._objects[2].opacity); }, //画板绘制 canvasDrawLine(keyP) { console.log(keyP); var canvas = new fabric.Canvas("canvas"); this.canvas_v = canvas; //缩放 canvas.on("mouse:wheel", function (opt) { var delta = opt.e.deltaY; var zoom = canvas.getZoom(); zoom *= 0.999 ** delta; if (zoom > 20) zoom = 20; if (zoom < 0.01) zoom = 0.01; canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom); opt.e.preventDefault(); opt.e.stopppropagation(); }); //加载元素 document.onreadystatechange = function () { if (document.readyState == "complete") { //配置图片 //人物1 var imgElement = document.getElementById("ppp_"); //人物2 var ppElement = document.getElementById("pp_") //房间 var room_ = document.getElementById("room_"); //姓名标签 var xm_ = document.getElementById("xm_"); //加载房间 var roomInstance = new fabric.Image(room_, { selectable: false, left: 670, top: 100, opacity: 1, zIndex: 300, angle: 90, }); canvas.add(roomInstance.scale(0.2)); //============ //======================= //加载姓名标签 var xm_Instance = new fabric.Image(xm_, { selectable: false, left: 270, top: 238, opacity: 0.8, }); //加赞心率显示标签 canvas.add(xm_Instance.scale(0.1)); const rect = new fabric.Rect({ width: 35, height: 15, rx: 6, ry: 6, fill: '#89929ce5' }) const text = new fabric.IText('32', { fontFamily: 'Calibri', fontSize: 8, left: rect.width/2, top: rect.height/2, originX: 'center', originY: 'center', centeredRotation: true, fill: '#fff' }) //创建心率标签 var block = new fabric.Group([rect,text], { selectable: false, left: 270, top: 228 }) canvas.add(block.scale(0.6)) //加载人物2图标 var ppInstance = new fabric.Image(ppElement,{ selectable:false, left:221, top:170, opacity:1, }) canvas.add(ppInstance.scale(0.3)) //加载人物1图标 var imgInstance = new fabric.Image(imgElement, { selectable: false, left: 270, top: 250, opacity: 1, zIndex: 299, }); canvas.add(imgInstance.scale(0.1)); //scale()使图片按比例缩小 canvas.renderAll(); var keyPoint = [ //人物1的路径坐标 [{ x: 321, y: 270, duration: 1000 }, { x: 391, y: 211, duration: 2000 }, ], [ //人物2的路径坐标 { x: 123, y: 124, duration: 1000 }, { x: 352, y: 213, duration: 2000 }, ] ]; var runningDuration = 0; //获取画布中的元素并设置该元素的属性 // canvas.setActiveObject()._objects[1].set('opacity', 0) console.log(canvas.setActiveObject()._objects); //载入坐标循环 for (let i = 0; i < keyPoint[0].length; i++) { let animationDefinition = keyPoint[0][i]; let fn = function ( animationDefinition, imgInstance, xm_Instance, block ) { return function () { //移动人物1图标 { imgInstance.animate("left", animationDefinition.x, { duration: animationDefinition.duration, zIndex: 299, onChange: canvas.renderAll.bind(canvas), }); imgInstance.animate("top", animationDefinition.y, { duration: animationDefinition.duration, zIndex: 299, onChange: canvas.renderAll.bind(canvas), }); } //姓名移动标签 { xm_Instance.animate("left", animationDefinition.x + 2, { duration: animationDefinition.duration, onChange: canvas.renderAll.bind(canvas), }); xm_Instance.animate("top", animationDefinition.y - 12, { duration: animationDefinition.duration, onChange: canvas.renderAll.bind(canvas), }); } //心率移动标签 { console.log(block.opacity); block.animate("left", animationDefinition.x + 2, { duration: animationDefinition.duration, onChange: canvas.renderAll.bind(canvas), }); block.animate("top", animationDefinition.y - 22, { duration: animationDefinition.duration, onChange: canvas.renderAll.bind(canvas), }); } }; }; window.setTimeout( fn(animationDefinition, imgInstance, xm_Instance, block), runningDuration ); runningDuration += animationDefinition.duration; } for (let i = 0; i < keyPoint[1].length; i++) { let animationDefinition = keyPoint[1][i]; let fn = function ( animationDefinition, ppInstance, xm_Instance, block ) { return function () { console.log(xm_Instance,block) //移动人物2图标 { ppInstance.animate("left", animationDefinition.x, { duration: animationDefinition.duration, zIndex: 299, onChange: canvas.renderAll.bind(canvas), }); ppInstance.animate("top", animationDefinition.y, { duration: animationDefinition.duration, zIndex: 299, onChange: canvas.renderAll.bind(canvas), }); } }; }; window.setTimeout( fn(animationDefinition, ppInstance, xm_Instance, block), runningDuration ); runningDuration += animationDefinition.duration; } } }; }, }, }; </script>
作者：iloveYHW00979
链接：https://juejin.cn/post/7024106348514115614