Skip to content

Commit d3c9f06

Browse files
author
zhaokai
committed
动画路径
1 parent 5c1ed8e commit d3c9f06

File tree

12 files changed

+363
-153
lines changed

12 files changed

+363
-153
lines changed

‎src/service/2DPlot/PlotCanvas.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* @Author: zk
55
* @Date: 2022-05-13 10:34:57
66
* @LastEditors: zk
7-
* @LastEditTime: 2022-05-24 11:12:29
7+
* @LastEditTime: 2022-05-26 11:42:37
88
*/
99

1010
import { DrawPlotObjectFactory2D } from './Draw/DrawPlotObjectFactory2D';
@@ -429,6 +429,7 @@ export default class PlotCanvas {
429429
})
430430
}
431431

432+
432433
/**
433434
* @function: Module:PlotCanvas.prototype.requestRenderAll
434435
* @description: 请求渲染

‎src/service/2DPlot/PlotCanvasGroup.js‎

Lines changed: 34 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* @Author: zk
55
* @Date: 2022-05-13 11:01:10
66
* @LastEditors: zk
7-
* @LastEditTime: 2022-05-24 11:49:53
7+
* @LastEditTime: 2022-05-26 15:30:28
88
*/
99

1010
import { fabric } from 'fabric';
@@ -203,21 +203,36 @@ export const PlotCanvasGroup = fabric.util.createClass(fabric.Canvas, {
203203
* @return {*}
204204
*/
205205
getPlotObjectById(uid) {
206-
let t=null;
207-
for(let i =0;i<this._objects.length;i++){
208-
const object = this._objects[i]
206+
let t = null;
207+
for (let i = 0; i < this._objects.length; i++) {
208+
const object = this._objects[i];
209209
const elem = object.getElement();
210210
if (elem && elem.getFeatureId() === uid) {
211211
t = object;
212-
break
213-
}
212+
break;
213+
}
214214
}
215215
return t;
216216
},
217-
initLayerCoords(){
218-
this._plotCanvasLayers.forEach(layer => {
219-
layer.initCoords()
217+
initLayerCoords() {
218+
this._plotCanvasLayers.forEach((layer) => {
219+
layer.initCoords();
220+
});
221+
},
222+
addUtilPath(coords, options) {
223+
const coordSys = this.getCoordSys();
224+
const points = coords.map((s) => {
225+
const v = coordSys.dataToPoint([s.x, s.y]);
226+
return { x: v[0], y: v[1] };
220227
});
228+
const polyline = new fabric.Polyline(points, {
229+
fill:'green',
230+
});
231+
// this.add(polyline);
232+
return polyline
233+
},
234+
removeUtilPath(utilPlotObject){
235+
this.remove(utilPlotObject)
221236
},
222237
/**
223238
* @function: Module:PlotCanvasGroup.prototype._renderObjects
@@ -226,20 +241,20 @@ export const PlotCanvasGroup = fabric.util.createClass(fabric.Canvas, {
226241
* @param {Array<Object>} objects
227242
*/
228243
_renderObjects(ctx, objects) {
229-
this.initLayerCoords()
244+
this.initLayerCoords();
230245
var i, len;
231246
for (i = 0, len = objects.length; i < len; ++i) {
232247
const object = objects[i];
233248
const element = object.getElement();
234-
const bounds = element.getBounds()
235-
const left = bounds.left
236-
const bottom= bounds.bottom
237-
const top= bounds.top
238-
const right= bounds.right
239-
240-
let flag = true
241-
if((this.width<left && this.height<bottom) || (top<0 && right<0 ) ){
242-
flag=false
249+
const bounds = element.getBounds();
250+
const left = bounds.left;
251+
const bottom = bounds.bottom;
252+
const top = bounds.top;
253+
const right = bounds.right;
254+
255+
let flag = true;
256+
if ((this.width < left && this.height < bottom) || (top < 0 && right < 0)) {
257+
flag = false;
243258
}
244259
flag && object && object.render(ctx);
245260
}

‎src/service/2DPlot/Shapes/PlotObject.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
* @Author: your name
33
* @Date: 2021-07-05 11:32:52
4-
* @LastEditTime: 2022-05-24 11:49:33
4+
* @LastEditTime: 2022-05-26 15:30:59
55
* @LastEditors: zk
66
* @Description: In User Settings Edit
77
* @FilePath: \MapGISPlot\src\js\Shapes\PlotObject.js

‎src/service/2DPlot/Shapes/RegularShapes/PlotRegularObject.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* @Author: zk
44
* @Date: 2021-11-17 16:12:55
55
* @LastEditors: zk
6-
* @LastEditTime: 2022-05-25 16:56:30
6+
* @LastEditTime: 2022-05-24 11:19:36
77
*/
88

99
import { fabric } from 'fabric';

‎src/service/PlotBase/Animation/AnimationTypes/PlotBaseAnimation.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* @Author: zk
44
* @Date: 2022-03-23 10:02:49
55
* @LastEditors: zk
6-
* @LastEditTime: 2022-05-25 12:06:38
6+
* @LastEditTime: 2022-05-26 15:09:13
77
*/
88
import { AnimationUtil } from '../utils/AnimationUtil';
99
import { easingFunc } from '../utils/Easing';
@@ -27,8 +27,12 @@ export default class PlotBaseAnimation {
2727
this._plotObjects = options.plotObjects || null;
2828
// 动画状态
2929
this._status = 'pending';
30-
// 刷新函数
30+
// 图层组函数
3131
this.handRefresh = options.handRefresh || function () {};
32+
this.getPlotObjectById = options.getPlotObjectById || function (uid) {};
33+
this.addUtilPath= options.addUtilPath || function (){}
34+
this.removeUtilPath= options.removeUtilPath || function(){
35+
}
3236
// 时段记录
3337
this.timeSpace = 0;
3438
// 播放历史
@@ -43,14 +47,13 @@ export default class PlotBaseAnimation {
4347
this.isCanRender = true;
4448
}
4549
// 更新动画参数
46-
update() {
47-
}
50+
update() {}
4851
// 销毁动画
4952
destory() {}
5053
// 开始动画
5154
play(_totalTime) {
5255
// 更新动画参数
53-
this.update()
56+
this.update();
5457
// 动画播放
5558
let rate = 0;
5659
let start;

‎src/service/PlotBase/Animation/AnimationTypes/PlotExtendAnimation/PlotGrowAnimation/PlotCoordsAnimation.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/*
2+
* @Description: 控制点动画类
3+
* @Author: zk
4+
* @Date: 2022-03-23 10:02:49
5+
* @LastEditors: zk
6+
* @LastEditTime: 2022-05-25 11:31:15
7+
*/
8+
import Point from '../../../../../PlotUtilBase/Geometry/Point';
9+
import PlotBaseAnimation from '../../PlotBaseAnimation';
10+
11+
export default class PlotCoordsAnimation extends PlotBaseAnimation {
12+
constructor(options) {
13+
super(options);
14+
}
15+
16+
_initBaseAttributes(options) {
17+
super._initBaseAttributes(options)
18+
// animation type
19+
this.animationType = 'coords-animation';
20+
}
21+
22+
update() {
23+
super.update()
24+
// 初始化动画polys
25+
const plotObjects = this._plotObjects;
26+
this._animationPolys = plotObjects.map((s) => {
27+
const elem = s.getElement();
28+
if (elem) {
29+
return elem.positions.map((s) => new Point(s.x, s.y));
30+
}
31+
});
32+
}
33+
restore() {
34+
super.restore();
35+
this._plotObjects.forEach((s, i) => {
36+
this._setPnts(s, this._animationPolys[i]);
37+
});
38+
}
39+
_setPnts(obj, positions) {
40+
if (obj.positions) {
41+
obj.positions = positions;
42+
}
43+
if (obj.setPnts) {
44+
obj.setPnts(positions);
45+
46+
}
47+
}
48+
}

‎src/service/PlotBase/Animation/AnimationTypes/PlotExtendAnimation/PlotGrowAnimation/PlotPathAnimation.js‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { AnimationUtil } from '../../../utils/AnimationUtil';
2+
import PlotCoordsAnimation from './PlotCoordsAnimation';
3+
import Spline from '../../../../../PlotUtilBase/Geometry/Spline';
4+
import Point from '../../../../../PlotUtilBase/Geometry/Point';
5+
import MainLineElement from '../../../../SvgLoader/element/extend/MainLineElement';
6+
/*
7+
* @Description: 路径动画类
8+
* @Author: zk
9+
* @Date: 2022-04-19 09:59:57
10+
* @LastEditors: zk
11+
* @LastEditTime: 2022-05-26 16:13:31
12+
*/
13+
export default class PlotPathAnimation extends PlotCoordsAnimation {
14+
constructor(options) {
15+
super(options);
16+
}
17+
_initBaseAttributes(options) {
18+
super._initBaseAttributes(options);
19+
// animation type
20+
this.animationType = 'path-animation';
21+
// init options
22+
this.animationCoords = AnimationUtil.defineValue(
23+
options.animationCoords.map((s) => new Point(s[0], s[1])),
24+
[]
25+
);
26+
this.showPath = AnimationUtil.defineValue(options.showPath, false);
27+
this.pathStyle = AnimationUtil.defineValue(options.pathStyle, {});
28+
this.pathType = AnimationUtil.defineValue(options.pathType, 'line');
29+
this.startPathRate = AnimationUtil.defineValue(options.startPathRate, 0);
30+
this.endPathRate = AnimationUtil.defineValue(options.endPathRate, 1);
31+
32+
//是否沿切线方向
33+
this.AlongTangent = AnimationUtil.defineValue(options.AlongTangent, true);
34+
35+
//绑定id
36+
this.symbolBindId = AnimationUtil.defineValue(options.symbolBindId, null);
37+
38+
// 路径对象
39+
this.pathWayObject=null
40+
// init geometry
41+
this.geometryInstance = null;
42+
this.geometryAngles = [];
43+
}
44+
update() {
45+
super.update();
46+
// 根据路径类型生成几何
47+
const { pathType } = this;
48+
49+
const plot= this.getPlotObjectById(this.symbolBindId)
50+
let coords=null
51+
if(plot){
52+
coords=plot.getElement().positions
53+
}else{
54+
coords=this.animationCoords
55+
}
56+
57+
if (pathType == 'line') {
58+
this.geometryInstance = new Spline(coords);
59+
}
60+
61+
// const main= new MainLineElement()
62+
// main.applyMainGeo(this.geometryInstance)
63+
// const tempCoords=main.getCoords().flat()
64+
65+
// this.pathWayObject=this.addUtilPath(tempCoords)
66+
67+
this.geometryAngles = this._plotObjects.map((s) => s.getElement().getGeometryAngle());
68+
}
69+
70+
_calcTrueRate(rate) {
71+
const startRate = this.startPathRate;
72+
const endRate = this.endPathRate;
73+
return (endRate - startRate) * rate + startRate;
74+
}
75+
76+
restore() {
77+
super.restore();
78+
this._plotObjects.forEach((s, i) => {
79+
const element = s.getElement();
80+
element.setGeometryAngle(this.geometryAngles[i]);
81+
});
82+
}
83+
84+
render(rate) {
85+
if(!this.geometryInstance) return;
86+
const trueRate = this._calcTrueRate(rate);
87+
88+
const v = this.geometryInstance.getTransfromByRate(trueRate);
89+
const pnt = new Point(v[0][0], v[0][1]);
90+
91+
this._plotObjects.forEach((plotobject) => {
92+
const element = plotobject.getElement();
93+
// 设置沿斜线方向的角度
94+
if (this.AlongTangent) {
95+
element.setGeometryAngle(v[1]);
96+
}
97+
this._setPnts(plotobject, [pnt]);
98+
});
99+
}
100+
}

0 commit comments

Comments
 (0)