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 };