| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348 |
- import { isDisplayObject, Shape, AbstractRendererPlugin } from '@antv/g-lite';
- import { clamp } from '@antv/util';
- function _inheritsLoose(subClass, superClass) {
- subClass.prototype = Object.create(superClass.prototype);
- subClass.prototype.constructor = subClass;
- _setPrototypeOf(subClass, superClass);
- }
- function _setPrototypeOf(o, p) {
- _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
- o.__proto__ = p;
- return o;
- };
- return _setPrototypeOf(o, p);
- }
- function generatePath(context, parsedStyle) {
- var r = parsedStyle.r;
- context.arc(r, r, r, 0, Math.PI * 2, false);
- }
- function generatePath$1(context, parsedStyle) {
- var rxInPixels = parsedStyle.rx,
- ryInPixels = parsedStyle.ry;
- var rx = rxInPixels;
- var ry = ryInPixels;
- // @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/ellipse
- if (context.ellipse) {
- context.ellipse(rx, ry, rx, ry, 0, 0, Math.PI * 2, false);
- } else {
- // 如果不支持,则使用圆来绘制,进行变形
- var r = rx > ry ? rx : ry;
- var scaleX = rx > ry ? 1 : rx / ry;
- var scaleY = rx > ry ? ry / rx : 1;
- context.save();
- context.scale(scaleX, scaleY);
- context.arc(0, 0, r, 0, Math.PI * 2);
- }
- }
- function generatePath$2(context, parsedStyle) {
- var x1 = parsedStyle.x1,
- y1 = parsedStyle.y1,
- x2 = parsedStyle.x2,
- y2 = parsedStyle.y2,
- _parsedStyle$defX = parsedStyle.defX,
- defX = _parsedStyle$defX === void 0 ? 0 : _parsedStyle$defX,
- _parsedStyle$defY = parsedStyle.defY,
- defY = _parsedStyle$defY === void 0 ? 0 : _parsedStyle$defY,
- markerStart = parsedStyle.markerStart,
- markerEnd = parsedStyle.markerEnd,
- markerStartOffset = parsedStyle.markerStartOffset,
- markerEndOffset = parsedStyle.markerEndOffset;
- var startOffsetX = 0;
- var startOffsetY = 0;
- var endOffsetX = 0;
- var endOffsetY = 0;
- var rad = 0;
- var x;
- var y;
- if (markerStart && isDisplayObject(markerStart) && markerStartOffset) {
- x = x2 - x1;
- y = y2 - y1;
- rad = Math.atan2(y, x);
- startOffsetX = Math.cos(rad) * (markerStartOffset || 0);
- startOffsetY = Math.sin(rad) * (markerStartOffset || 0);
- }
- if (markerEnd && isDisplayObject(markerEnd) && markerEndOffset) {
- x = x1 - x2;
- y = y1 - y2;
- rad = Math.atan2(y, x);
- endOffsetX = Math.cos(rad) * (markerEndOffset || 0);
- endOffsetY = Math.sin(rad) * (markerEndOffset || 0);
- }
- context.moveTo(x1 - defX + startOffsetX, y1 - defY + startOffsetY);
- context.lineTo(x2 - defX + endOffsetX, y2 - defY + endOffsetY);
- }
- function generatePath$3(context, parsedStyle) {
- var _parsedStyle$defX = parsedStyle.defX,
- defX = _parsedStyle$defX === void 0 ? 0 : _parsedStyle$defX,
- _parsedStyle$defY = parsedStyle.defY,
- defY = _parsedStyle$defY === void 0 ? 0 : _parsedStyle$defY,
- markerStart = parsedStyle.markerStart,
- markerEnd = parsedStyle.markerEnd,
- markerStartOffset = parsedStyle.markerStartOffset,
- markerEndOffset = parsedStyle.markerEndOffset;
- var _parsedStyle$path = parsedStyle.path,
- absolutePath = _parsedStyle$path.absolutePath,
- segments = _parsedStyle$path.segments;
- var startOffsetX = 0;
- var startOffsetY = 0;
- var endOffsetX = 0;
- var endOffsetY = 0;
- var rad = 0;
- var x;
- var y;
- if (markerStart && isDisplayObject(markerStart) && markerStartOffset) {
- var _markerStart$parentNo = markerStart.parentNode.getStartTangent(),
- p1 = _markerStart$parentNo[0],
- p2 = _markerStart$parentNo[1];
- x = p1[0] - p2[0];
- y = p1[1] - p2[1];
- rad = Math.atan2(y, x);
- startOffsetX = Math.cos(rad) * (markerStartOffset || 0);
- startOffsetY = Math.sin(rad) * (markerStartOffset || 0);
- }
- if (markerEnd && isDisplayObject(markerEnd) && markerEndOffset) {
- var _markerEnd$parentNode = markerEnd.parentNode.getEndTangent(),
- _p = _markerEnd$parentNode[0],
- _p2 = _markerEnd$parentNode[1];
- x = _p[0] - _p2[0];
- y = _p[1] - _p2[1];
- rad = Math.atan2(y, x);
- endOffsetX = Math.cos(rad) * (markerEndOffset || 0);
- endOffsetY = Math.sin(rad) * (markerEndOffset || 0);
- }
- for (var i = 0; i < absolutePath.length; i++) {
- var params = absolutePath[i];
- var command = params[0];
- var nextSegment = absolutePath[i + 1];
- var useStartOffset = i === 0 && (startOffsetX !== 0 || startOffsetY !== 0);
- var useEndOffset = (i === absolutePath.length - 1 || nextSegment && (nextSegment[0] === 'M' || nextSegment[0] === 'Z')) && endOffsetX !== 0 && endOffsetY !== 0;
- switch (command) {
- case 'M':
- // Use start marker offset
- if (useStartOffset) {
- context.moveTo(params[1] - defX + startOffsetX, params[2] - defY + startOffsetY);
- context.lineTo(params[1] - defX, params[2] - defY);
- } else {
- context.moveTo(params[1] - defX, params[2] - defY);
- }
- break;
- case 'L':
- if (useEndOffset) {
- context.lineTo(params[1] - defX + endOffsetX, params[2] - defY + endOffsetY);
- } else {
- context.lineTo(params[1] - defX, params[2] - defY);
- }
- break;
- case 'Q':
- context.quadraticCurveTo(params[1] - defX, params[2] - defY, params[3] - defX, params[4] - defY);
- if (useEndOffset) {
- context.lineTo(params[3] - defX + endOffsetX, params[4] - defY + endOffsetY);
- }
- break;
- case 'C':
- context.bezierCurveTo(params[1] - defX, params[2] - defY, params[3] - defX, params[4] - defY, params[5] - defX, params[6] - defY);
- if (useEndOffset) {
- context.lineTo(params[5] - defX + endOffsetX, params[6] - defY + endOffsetY);
- }
- break;
- case 'A':
- {
- var arcParams = segments[i].arcParams;
- var cx = arcParams.cx,
- cy = arcParams.cy,
- rx = arcParams.rx,
- ry = arcParams.ry,
- startAngle = arcParams.startAngle,
- endAngle = arcParams.endAngle,
- xRotation = arcParams.xRotation,
- sweepFlag = arcParams.sweepFlag;
- // @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/ellipse
- if (context.ellipse) {
- context.ellipse(cx - defX, cy - defY, rx, ry, xRotation, startAngle, endAngle, !!(1 - sweepFlag));
- } else {
- // @see https://stackoverflow.com/a/47494351
- var r = rx > ry ? rx : ry;
- var scaleX = rx > ry ? 1 : rx / ry;
- var scaleY = rx > ry ? ry / rx : 1;
- context.translate(cx - defX, cy - defY);
- context.rotate(xRotation);
- context.scale(scaleX, scaleY);
- context.arc(0, 0, r, startAngle, endAngle, !!(1 - sweepFlag));
- context.scale(1 / scaleX, 1 / scaleY);
- context.rotate(-xRotation);
- context.translate(-(cx - defX), -(cy - defY));
- }
- if (useEndOffset) {
- context.lineTo(params[6] - defX + endOffsetX, params[7] - defY + endOffsetY);
- }
- break;
- }
- case 'Z':
- context.closePath();
- break;
- }
- }
- }
- function generatePath$4(context, parsedStyle) {
- var _parsedStyle$defX = parsedStyle.defX,
- defX = _parsedStyle$defX === void 0 ? 0 : _parsedStyle$defX,
- _parsedStyle$defY = parsedStyle.defY,
- defY = _parsedStyle$defY === void 0 ? 0 : _parsedStyle$defY,
- markerStart = parsedStyle.markerStart,
- markerEnd = parsedStyle.markerEnd,
- markerStartOffset = parsedStyle.markerStartOffset,
- markerEndOffset = parsedStyle.markerEndOffset;
- var points = parsedStyle.points.points;
- var length = points.length;
- var x1 = points[0][0] - defX;
- var y1 = points[0][1] - defY;
- var x2 = points[length - 1][0] - defX;
- var y2 = points[length - 1][1] - defY;
- var startOffsetX = 0;
- var startOffsetY = 0;
- var endOffsetX = 0;
- var endOffsetY = 0;
- var rad = 0;
- var x;
- var y;
- if (markerStart && isDisplayObject(markerStart) && markerStartOffset) {
- x = points[1][0] - points[0][0];
- y = points[1][1] - points[0][1];
- rad = Math.atan2(y, x);
- startOffsetX = Math.cos(rad) * (markerStartOffset || 0);
- startOffsetY = Math.sin(rad) * (markerStartOffset || 0);
- }
- if (markerEnd && isDisplayObject(markerEnd) && markerEndOffset) {
- x = points[length - 1][0] - points[0][0];
- y = points[length - 1][1] - points[0][1];
- rad = Math.atan2(y, x);
- endOffsetX = Math.cos(rad) * (markerEndOffset || 0);
- endOffsetY = Math.sin(rad) * (markerEndOffset || 0);
- }
- context.moveTo(x1 + (startOffsetX || endOffsetX), y1 + (startOffsetY || endOffsetY));
- for (var i = 1; i < length - 1; i++) {
- var point = points[i];
- context.lineTo(point[0] - defX, point[1] - defY);
- }
- context.lineTo(x2, y2);
- }
- function generatePath$5(context, parsedStyle) {
- var _parsedStyle$defX = parsedStyle.defX,
- defX = _parsedStyle$defX === void 0 ? 0 : _parsedStyle$defX,
- _parsedStyle$defY = parsedStyle.defY,
- defY = _parsedStyle$defY === void 0 ? 0 : _parsedStyle$defY,
- markerStart = parsedStyle.markerStart,
- markerEnd = parsedStyle.markerEnd,
- markerStartOffset = parsedStyle.markerStartOffset,
- markerEndOffset = parsedStyle.markerEndOffset;
- var points = parsedStyle.points.points;
- var length = points.length;
- var x1 = points[0][0] - defX;
- var y1 = points[0][1] - defY;
- var x2 = points[length - 1][0] - defX;
- var y2 = points[length - 1][1] - defY;
- var startOffsetX = 0;
- var startOffsetY = 0;
- var endOffsetX = 0;
- var endOffsetY = 0;
- var rad = 0;
- var x;
- var y;
- if (markerStart && isDisplayObject(markerStart) && markerStartOffset) {
- x = points[1][0] - points[0][0];
- y = points[1][1] - points[0][1];
- rad = Math.atan2(y, x);
- startOffsetX = Math.cos(rad) * (markerStartOffset || 0);
- startOffsetY = Math.sin(rad) * (markerStartOffset || 0);
- }
- if (markerEnd && isDisplayObject(markerEnd) && markerEndOffset) {
- x = points[length - 2][0] - points[length - 1][0];
- y = points[length - 2][1] - points[length - 1][1];
- rad = Math.atan2(y, x);
- endOffsetX = Math.cos(rad) * (markerEndOffset || 0);
- endOffsetY = Math.sin(rad) * (markerEndOffset || 0);
- }
- context.moveTo(x1 + startOffsetX, y1 + startOffsetY);
- for (var i = 1; i < length - 1; i++) {
- var point = points[i];
- context.lineTo(point[0] - defX, point[1] - defY);
- }
- context.lineTo(x2 + endOffsetX, y2 + endOffsetY);
- }
- function generatePath$6(context, parsedStyle) {
- var radius = parsedStyle.radius,
- width = parsedStyle.width,
- height = parsedStyle.height;
- var w = width;
- var h = height;
- var hasRadius = radius && radius.some(function (r) {
- return r !== 0;
- });
- if (!hasRadius) {
- // Canvas support negative width/height of rect
- context.rect(0, 0, w, h);
- } else {
- var signX = width > 0 ? 1 : -1;
- var signY = height > 0 ? 1 : -1;
- var sweepFlag = signX + signY === 0;
- var _radius$map = radius.map(function (r) {
- return clamp(r, 0, Math.min(Math.abs(w) / 2, Math.abs(h) / 2));
- }),
- tlr = _radius$map[0],
- trr = _radius$map[1],
- brr = _radius$map[2],
- blr = _radius$map[3];
- context.moveTo(signX * tlr, 0);
- context.lineTo(w - signX * trr, 0);
- if (trr !== 0) {
- context.arc(w - signX * trr, signY * trr, trr, -signY * Math.PI / 2, signX > 0 ? 0 : Math.PI, sweepFlag);
- }
- context.lineTo(w, h - signY * brr);
- if (brr !== 0) {
- context.arc(w - signX * brr, h - signY * brr, brr, signX > 0 ? 0 : Math.PI, signY > 0 ? Math.PI / 2 : 1.5 * Math.PI, sweepFlag);
- }
- context.lineTo(signX * blr, h);
- if (blr !== 0) {
- context.arc(signX * blr, h - signY * blr, blr, signY > 0 ? Math.PI / 2 : -Math.PI / 2, signX > 0 ? Math.PI : 0, sweepFlag);
- }
- context.lineTo(0, signY * tlr);
- if (tlr !== 0) {
- context.arc(signX * tlr, signY * tlr, tlr, signX > 0 ? Math.PI : 0, signY > 0 ? Math.PI * 1.5 : Math.PI / 2, sweepFlag);
- }
- }
- }
- var Plugin = /*#__PURE__*/function (_AbstractRendererPlug) {
- _inheritsLoose(Plugin, _AbstractRendererPlug);
- function Plugin() {
- var _this;
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
- args[_key] = arguments[_key];
- }
- _this = _AbstractRendererPlug.call.apply(_AbstractRendererPlug, [this].concat(args)) || this;
- _this.name = 'canvas-path-generator';
- return _this;
- }
- var _proto = Plugin.prototype;
- _proto.init = function init() {
- var _pathGeneratorFactory;
- var pathGeneratorFactory = (_pathGeneratorFactory = {}, _pathGeneratorFactory[Shape.CIRCLE] = generatePath, _pathGeneratorFactory[Shape.ELLIPSE] = generatePath$1, _pathGeneratorFactory[Shape.RECT] = generatePath$6, _pathGeneratorFactory[Shape.LINE] = generatePath$2, _pathGeneratorFactory[Shape.POLYLINE] = generatePath$5, _pathGeneratorFactory[Shape.POLYGON] = generatePath$4, _pathGeneratorFactory[Shape.PATH] = generatePath$3, _pathGeneratorFactory[Shape.TEXT] = undefined, _pathGeneratorFactory[Shape.GROUP] = undefined, _pathGeneratorFactory[Shape.IMAGE] = undefined, _pathGeneratorFactory[Shape.HTML] = undefined, _pathGeneratorFactory[Shape.MESH] = undefined, _pathGeneratorFactory);
- // @ts-ignore
- this.context.pathGeneratorFactory = pathGeneratorFactory;
- };
- _proto.destroy = function destroy() {
- // @ts-ignore
- delete this.context.pathGeneratorFactory;
- };
- return Plugin;
- }(AbstractRendererPlugin);
- export { Plugin };
|