[d565449] | 1 | "use strict";
|
---|
| 2 | Object.defineProperty(exports, "__esModule", { value: true });
|
---|
| 3 | exports.Line = void 0;
|
---|
| 4 | const Factory_1 = require("../Factory");
|
---|
| 5 | const Shape_1 = require("../Shape");
|
---|
| 6 | const Validators_1 = require("../Validators");
|
---|
| 7 | const Global_1 = require("../Global");
|
---|
| 8 | function getControlPoints(x0, y0, x1, y1, x2, y2, t) {
|
---|
| 9 | var d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2)), d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)), fa = (t * d01) / (d01 + d12), fb = (t * d12) / (d01 + d12), p1x = x1 - fa * (x2 - x0), p1y = y1 - fa * (y2 - y0), p2x = x1 + fb * (x2 - x0), p2y = y1 + fb * (y2 - y0);
|
---|
| 10 | return [p1x, p1y, p2x, p2y];
|
---|
| 11 | }
|
---|
| 12 | function expandPoints(p, tension) {
|
---|
| 13 | var len = p.length, allPoints = [], n, cp;
|
---|
| 14 | for (n = 2; n < len - 2; n += 2) {
|
---|
| 15 | cp = getControlPoints(p[n - 2], p[n - 1], p[n], p[n + 1], p[n + 2], p[n + 3], tension);
|
---|
| 16 | if (isNaN(cp[0])) {
|
---|
| 17 | continue;
|
---|
| 18 | }
|
---|
| 19 | allPoints.push(cp[0]);
|
---|
| 20 | allPoints.push(cp[1]);
|
---|
| 21 | allPoints.push(p[n]);
|
---|
| 22 | allPoints.push(p[n + 1]);
|
---|
| 23 | allPoints.push(cp[2]);
|
---|
| 24 | allPoints.push(cp[3]);
|
---|
| 25 | }
|
---|
| 26 | return allPoints;
|
---|
| 27 | }
|
---|
| 28 | class Line extends Shape_1.Shape {
|
---|
| 29 | constructor(config) {
|
---|
| 30 | super(config);
|
---|
| 31 | this.on('pointsChange.konva tensionChange.konva closedChange.konva bezierChange.konva', function () {
|
---|
| 32 | this._clearCache('tensionPoints');
|
---|
| 33 | });
|
---|
| 34 | }
|
---|
| 35 | _sceneFunc(context) {
|
---|
| 36 | var points = this.points(), length = points.length, tension = this.tension(), closed = this.closed(), bezier = this.bezier(), tp, len, n;
|
---|
| 37 | if (!length) {
|
---|
| 38 | return;
|
---|
| 39 | }
|
---|
| 40 | context.beginPath();
|
---|
| 41 | context.moveTo(points[0], points[1]);
|
---|
| 42 | if (tension !== 0 && length > 4) {
|
---|
| 43 | tp = this.getTensionPoints();
|
---|
| 44 | len = tp.length;
|
---|
| 45 | n = closed ? 0 : 4;
|
---|
| 46 | if (!closed) {
|
---|
| 47 | context.quadraticCurveTo(tp[0], tp[1], tp[2], tp[3]);
|
---|
| 48 | }
|
---|
| 49 | while (n < len - 2) {
|
---|
| 50 | context.bezierCurveTo(tp[n++], tp[n++], tp[n++], tp[n++], tp[n++], tp[n++]);
|
---|
| 51 | }
|
---|
| 52 | if (!closed) {
|
---|
| 53 | context.quadraticCurveTo(tp[len - 2], tp[len - 1], points[length - 2], points[length - 1]);
|
---|
| 54 | }
|
---|
| 55 | }
|
---|
| 56 | else if (bezier) {
|
---|
| 57 | n = 2;
|
---|
| 58 | while (n < length) {
|
---|
| 59 | context.bezierCurveTo(points[n++], points[n++], points[n++], points[n++], points[n++], points[n++]);
|
---|
| 60 | }
|
---|
| 61 | }
|
---|
| 62 | else {
|
---|
| 63 | for (n = 2; n < length; n += 2) {
|
---|
| 64 | context.lineTo(points[n], points[n + 1]);
|
---|
| 65 | }
|
---|
| 66 | }
|
---|
| 67 | if (closed) {
|
---|
| 68 | context.closePath();
|
---|
| 69 | context.fillStrokeShape(this);
|
---|
| 70 | }
|
---|
| 71 | else {
|
---|
| 72 | context.strokeShape(this);
|
---|
| 73 | }
|
---|
| 74 | }
|
---|
| 75 | getTensionPoints() {
|
---|
| 76 | return this._getCache('tensionPoints', this._getTensionPoints);
|
---|
| 77 | }
|
---|
| 78 | _getTensionPoints() {
|
---|
| 79 | if (this.closed()) {
|
---|
| 80 | return this._getTensionPointsClosed();
|
---|
| 81 | }
|
---|
| 82 | else {
|
---|
| 83 | return expandPoints(this.points(), this.tension());
|
---|
| 84 | }
|
---|
| 85 | }
|
---|
| 86 | _getTensionPointsClosed() {
|
---|
| 87 | var p = this.points(), len = p.length, tension = this.tension(), firstControlPoints = getControlPoints(p[len - 2], p[len - 1], p[0], p[1], p[2], p[3], tension), lastControlPoints = getControlPoints(p[len - 4], p[len - 3], p[len - 2], p[len - 1], p[0], p[1], tension), middle = expandPoints(p, tension), tp = [firstControlPoints[2], firstControlPoints[3]]
|
---|
| 88 | .concat(middle)
|
---|
| 89 | .concat([
|
---|
| 90 | lastControlPoints[0],
|
---|
| 91 | lastControlPoints[1],
|
---|
| 92 | p[len - 2],
|
---|
| 93 | p[len - 1],
|
---|
| 94 | lastControlPoints[2],
|
---|
| 95 | lastControlPoints[3],
|
---|
| 96 | firstControlPoints[0],
|
---|
| 97 | firstControlPoints[1],
|
---|
| 98 | p[0],
|
---|
| 99 | p[1],
|
---|
| 100 | ]);
|
---|
| 101 | return tp;
|
---|
| 102 | }
|
---|
| 103 | getWidth() {
|
---|
| 104 | return this.getSelfRect().width;
|
---|
| 105 | }
|
---|
| 106 | getHeight() {
|
---|
| 107 | return this.getSelfRect().height;
|
---|
| 108 | }
|
---|
| 109 | getSelfRect() {
|
---|
| 110 | var points = this.points();
|
---|
| 111 | if (points.length < 4) {
|
---|
| 112 | return {
|
---|
| 113 | x: points[0] || 0,
|
---|
| 114 | y: points[1] || 0,
|
---|
| 115 | width: 0,
|
---|
| 116 | height: 0,
|
---|
| 117 | };
|
---|
| 118 | }
|
---|
| 119 | if (this.tension() !== 0) {
|
---|
| 120 | points = [
|
---|
| 121 | points[0],
|
---|
| 122 | points[1],
|
---|
| 123 | ...this._getTensionPoints(),
|
---|
| 124 | points[points.length - 2],
|
---|
| 125 | points[points.length - 1],
|
---|
| 126 | ];
|
---|
| 127 | }
|
---|
| 128 | else {
|
---|
| 129 | points = this.points();
|
---|
| 130 | }
|
---|
| 131 | var minX = points[0];
|
---|
| 132 | var maxX = points[0];
|
---|
| 133 | var minY = points[1];
|
---|
| 134 | var maxY = points[1];
|
---|
| 135 | var x, y;
|
---|
| 136 | for (var i = 0; i < points.length / 2; i++) {
|
---|
| 137 | x = points[i * 2];
|
---|
| 138 | y = points[i * 2 + 1];
|
---|
| 139 | minX = Math.min(minX, x);
|
---|
| 140 | maxX = Math.max(maxX, x);
|
---|
| 141 | minY = Math.min(minY, y);
|
---|
| 142 | maxY = Math.max(maxY, y);
|
---|
| 143 | }
|
---|
| 144 | return {
|
---|
| 145 | x: minX,
|
---|
| 146 | y: minY,
|
---|
| 147 | width: maxX - minX,
|
---|
| 148 | height: maxY - minY,
|
---|
| 149 | };
|
---|
| 150 | }
|
---|
| 151 | }
|
---|
| 152 | exports.Line = Line;
|
---|
| 153 | Line.prototype.className = 'Line';
|
---|
| 154 | Line.prototype._attrsAffectingSize = ['points', 'bezier', 'tension'];
|
---|
| 155 | (0, Global_1._registerNode)(Line);
|
---|
| 156 | Factory_1.Factory.addGetterSetter(Line, 'closed', false);
|
---|
| 157 | Factory_1.Factory.addGetterSetter(Line, 'bezier', false);
|
---|
| 158 | Factory_1.Factory.addGetterSetter(Line, 'tension', 0, (0, Validators_1.getNumberValidator)());
|
---|
| 159 | Factory_1.Factory.addGetterSetter(Line, 'points', [], (0, Validators_1.getNumberArrayValidator)());
|
---|