调整哈尔滨曲线封锁绘图

This commit is contained in:
joylink_zyy 2020-03-01 12:26:55 +08:00
parent 2c09aa0e84
commit e7a247ab4d

View File

@ -1,6 +1,13 @@
import Group from 'zrender/src/container/Group';
import Line from 'zrender/src/graphic/shape/Line';
import BezierCurve from 'zrender/src/graphic/shape/BezierCurve';
import {
cubicSubdivide,
quadraticAt,
cubicAt,
quadraticDerivativeAt,
cubicDerivativeAt } from 'zrender/src/core/curve';
import * as vec2 from 'zrender/src/core/vector';
/** 创建区段线集合*/
export default class ELines extends Group {
@ -15,14 +22,12 @@ export default class ELines extends Group {
create(model) {
/** 创建区段*/
if (model && model.points.length > 1) {
if (model.isCurve) { // 曲线 用贝塞尔曲线绘图 封锁有问题 待解决
if (model.isCurve) { // 曲线 用贝塞尔曲线绘图 封锁 必须4个点来绘图
const shape = {};
for (let i = 1; i < (model.points.length - 1); i++) {
shape[`cpx${i}`] = model.points[i].x;
shape[`cpy${i}`] = model.points[i].y;
}
// const spaceX= (model.points[model.points.length - 1].x - model.points[0].x) / 3;
// const spaceY= (model.points[model.points.length - 1].y - model.points[0].y) / 3;
shape[`x1`] = model.points[0].x;
shape[`y1`] = model.points[0].y;
@ -34,14 +39,13 @@ export default class ELines extends Group {
progressive: model.progressive,
z: this.z + 1,
culling: true,
shape: shape,
shape: this.couvert(shape),
style: {
lineWidth: model.style.Section.line.width,
stroke: model.style.Section.line.blockColor,
fillOpacity: 0
}
});
// console.log(this.section, this.section.pointAt());
this.add(this.section);
} else {
if (model.points.length == 2) {
@ -116,4 +120,68 @@ export default class ELines extends Group {
this.lineBorder && this.lineBorder.show();
}
}
// 寻找相同的曲线点位
someVectorAt(shape, t, isTangent) {
var cpx2 = shape.cpx2;
var cpy2 = shape.cpy2;
if (cpx2 === null || cpy2 === null) {
return [
(isTangent ? cubicDerivativeAt : cubicAt)(shape.x1, shape.cpx1, shape.cpx2, shape.x2, t),
(isTangent ? cubicDerivativeAt : cubicAt)(shape.y1, shape.cpy1, shape.cpy2, shape.y2, t)
];
}
else {
return [
(isTangent ? quadraticDerivativeAt : quadraticAt)(shape.x1, shape.cpx1, shape.x2, t),
(isTangent ? quadraticDerivativeAt : quadraticAt)(shape.y1, shape.cpy1, shape.y2, t)
];
}
}
// 重新计算居中距离点
couvert(shape) {
let out = [];
var x1 = shape.x1;
var y1 = shape.y1;
var x2 = shape.x2;
var y2 = shape.y2;
var cpx1 = shape.cpx1;
var cpy1 = shape.cpy1;
var cpx2 = shape.cpx2;
var cpy2 = shape.cpy2;
cubicSubdivide(
x1, cpx1, cpx2, x2, 0.3, out
);
var n_x1 = out[3];
cubicSubdivide(
x1, cpx1, cpx2, x2, 0.7, out
);
var n_x2 = out[3];
cubicSubdivide(
y1, cpy1, cpy2, y2, 0.3, out
);
var n_y1 = out[3];
cubicSubdivide(
y1, cpy1, cpy2, y2, 0.7, out
);
var n_y2 = out[3];
var p = this.someVectorAt(shape, 0.5, true);
var v = vec2.normalize(p, p);
var x0 = Math.sqrt((Math.pow(cpx1-x1, 2)+Math.pow(x2-cpx2, 2))/2, 2);
var y0 = Math.sqrt((Math.pow(cpy1-y1, 2)+Math.pow(y2-cpy2, 2))/2, 2);
return {
x1: n_x1,
y1: n_y1,
x2: n_x2,
y2: n_y2,
cpx1: (cpx1+cpx2)/2 + v[1]*x0*0.128,
cpy1: (cpy1+cpy2)/2 + v[0]*y0*0.128
};
}
}