Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@pixi/canvas-graphics
Advanced tools
@pixi/canvas-graphics - npm Package Compare versions
Comparing version 6.5.3 to 7.0.0-alpha
| /*! | ||
| * @pixi/canvas-graphics - v6.5.3 | ||
| * Compiled Fri, 09 Sep 2022 13:55:20 UTC | ||
| * @pixi/canvas-graphics - v7.0.0-alpha | ||
| * Compiled Fri, 09 Sep 2022 16:09:18 UTC | ||
| * | ||
@@ -13,607 +13,465 @@ * @pixi/canvas-graphics is licensed under the MIT License. | ||
| var core = require('@pixi/core'); | ||
| var math = require('@pixi/math'); | ||
| var canvasRenderer$1 = require('@pixi/canvas-renderer'); | ||
| var graphics = require('@pixi/graphics'); | ||
| /** | ||
| * Utilities for polygon | ||
| * @class | ||
| * @private | ||
| */ | ||
| var PolygonUtils = /** @class */ (function () { | ||
| function PolygonUtils() { | ||
| class PolygonUtils { | ||
| static offsetPolygon(points, offset) { | ||
| const offsetPoints = []; | ||
| const length = points.length; | ||
| offset = PolygonUtils.isPolygonClockwise(points) ? offset : -1 * offset; | ||
| for (let j = 0; j < length; j += 2) { | ||
| let i = j - 2; | ||
| if (i < 0) { | ||
| i += length; | ||
| } | ||
| const k = (j + 2) % length; | ||
| let v1x = points[j] - points[i]; | ||
| let v1y = points[j + 1] - points[i + 1]; | ||
| let len = Math.sqrt(v1x * v1x + v1y * v1y); | ||
| v1x /= len; | ||
| v1y /= len; | ||
| v1x *= offset; | ||
| v1y *= offset; | ||
| const norm1x = -v1y; | ||
| const norm1y = v1x; | ||
| const pij1 = [points[i] + norm1x, points[i + 1] + norm1y]; | ||
| const pij2 = [points[j] + norm1x, points[j + 1] + norm1y]; | ||
| let v2x = points[k] - points[j]; | ||
| let v2y = points[k + 1] - points[j + 1]; | ||
| len = Math.sqrt(v2x * v2x + v2y * v2y); | ||
| v2x /= len; | ||
| v2y /= len; | ||
| v2x *= offset; | ||
| v2y *= offset; | ||
| const norm2x = -v2y; | ||
| const norm2y = v2x; | ||
| const pjk1 = [points[j] + norm2x, points[j + 1] + norm2y]; | ||
| const pjk2 = [points[k] + norm2x, points[k + 1] + norm2y]; | ||
| const intersectPoint = PolygonUtils.findIntersection(pij1[0], pij1[1], pij2[0], pij2[1], pjk1[0], pjk1[1], pjk2[0], pjk2[1]); | ||
| if (intersectPoint) { | ||
| offsetPoints.push(...intersectPoint); | ||
| } | ||
| } | ||
| /** | ||
| * Calculate points of an offset polygon | ||
| * @see {@link http://csharphelper.com/blog/2016/01/enlarge-a-polygon-in-c/} | ||
| * @private | ||
| * @param {number[]} points - polygon coordinates | ||
| * @param {number} offset | ||
| * @returns {number[]} - offset points | ||
| */ | ||
| PolygonUtils.offsetPolygon = function (points, offset) { | ||
| var offsetPoints = []; | ||
| var length = points.length; | ||
| offset = PolygonUtils.isPolygonClockwise(points) ? offset : -1 * offset; | ||
| for (var j = 0; j < length; j += 2) { | ||
| // Find location for the points before and after j | ||
| var i = (j - 2); | ||
| if (i < 0) { | ||
| i += length; | ||
| } | ||
| var k = (j + 2) % length; | ||
| // Move the points by the offset | ||
| var v1x = points[j] - points[i]; | ||
| var v1y = points[j + 1] - points[i + 1]; | ||
| var len = Math.sqrt((v1x * v1x) + (v1y * v1y)); | ||
| v1x /= len; | ||
| v1y /= len; | ||
| v1x *= offset; | ||
| v1y *= offset; | ||
| var norm1x = -v1y; | ||
| var norm1y = v1x; | ||
| var pij1 = [points[i] + norm1x, points[i + 1] + norm1y]; | ||
| var pij2 = [points[j] + norm1x, points[j + 1] + norm1y]; | ||
| var v2x = points[k] - points[j]; | ||
| var v2y = points[k + 1] - points[j + 1]; | ||
| len = Math.sqrt((v2x * v2x) + (v2y * v2y)); | ||
| v2x /= len; | ||
| v2y /= len; | ||
| v2x *= offset; | ||
| v2y *= offset; | ||
| var norm2x = -v2y; | ||
| var norm2y = v2x; | ||
| var pjk1 = [points[j] + norm2x, points[j + 1] + norm2y]; | ||
| var pjk2 = [points[k] + norm2x, points[k + 1] + norm2y]; | ||
| // Find where the shifted lines ij and jk intersect. | ||
| var intersectPoint = PolygonUtils | ||
| .findIntersection(pij1[0], pij1[1], pij2[0], pij2[1], pjk1[0], pjk1[1], pjk2[0], pjk2[1]); | ||
| if (intersectPoint) { | ||
| offsetPoints.push.apply(offsetPoints, intersectPoint); | ||
| } | ||
| } | ||
| return offsetPoints; | ||
| }; | ||
| /** | ||
| * Determine the intersection point of two line segments | ||
| * @see {@link here http://paulbourke.net/geometry/pointlineplane/} | ||
| * @private | ||
| * @param {number} x1 - x-coordinate of start point at first line | ||
| * @param {number} y1 - y-coordinate of start point at first line | ||
| * @param {number} x2 - x-coordinate of end point at first line | ||
| * @param {number} y2 - y-coordinate of end point at first line | ||
| * @param {number} x3 - x-coordinate of start point at second line | ||
| * @param {number} y3 - y-coordinate of start point at second line | ||
| * @param {number} x4 - x-coordinate of end point at second line | ||
| * @param {number} y4 - y-coordinate of end point at second line | ||
| * @returns {[number, number] | null} - [x, y] coordinates of intersection | ||
| */ | ||
| PolygonUtils.findIntersection = function (x1, y1, x2, y2, x3, y3, x4, y4) { | ||
| var denominator = ((y4 - y3) * (x2 - x1)) - ((x4 - x3) * (y2 - y1)); | ||
| var numeratorA = ((x4 - x3) * (y1 - y3)) - ((y4 - y3) * (x1 - x3)); | ||
| var numeratorB = ((x2 - x1) * (y1 - y3)) - ((y2 - y1) * (x1 - x3)); | ||
| // lines are parallel | ||
| if (denominator === 0) { | ||
| // lines are coincident | ||
| if (numeratorA === 0 && numeratorB === 0) { | ||
| return [(x1 + x2) / 2, (y1 + y2) / 2]; | ||
| } | ||
| return null; | ||
| } | ||
| var uA = numeratorA / denominator; | ||
| return [x1 + (uA * (x2 - x1)), y1 + (uA * (y2 - y1))]; | ||
| }; | ||
| /** | ||
| * Determine polygon are clockwise or counterclockwise | ||
| * @see {@link https://stackoverflow.com/questions/1165647} | ||
| * @private | ||
| * @param {number[]} polygon - polygon coordinates | ||
| * @returns {boolean} - true if polygon is clockwise | ||
| */ | ||
| PolygonUtils.isPolygonClockwise = function (polygon) { | ||
| var sum = 0; | ||
| for (var i = 0, j = polygon.length - 2; i < polygon.length; j = i, i += 2) { | ||
| sum += (polygon[i] - polygon[j]) * (polygon[i + 1] + polygon[j + 1]); | ||
| } | ||
| return sum > 0; | ||
| }; | ||
| return PolygonUtils; | ||
| }()); | ||
| return offsetPoints; | ||
| } | ||
| static findIntersection(x1, y1, x2, y2, x3, y3, x4, y4) { | ||
| const denominator = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1); | ||
| const numeratorA = (x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3); | ||
| const numeratorB = (x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3); | ||
| if (denominator === 0) { | ||
| if (numeratorA === 0 && numeratorB === 0) { | ||
| return [(x1 + x2) / 2, (y1 + y2) / 2]; | ||
| } | ||
| return null; | ||
| } | ||
| const uA = numeratorA / denominator; | ||
| return [x1 + uA * (x2 - x1), y1 + uA * (y2 - y1)]; | ||
| } | ||
| static isPolygonClockwise(polygon) { | ||
| let sum = 0; | ||
| for (let i = 0, j = polygon.length - 2; i < polygon.length; j = i, i += 2) { | ||
| sum += (polygon[i] - polygon[j]) * (polygon[i + 1] + polygon[j + 1]); | ||
| } | ||
| return sum > 0; | ||
| } | ||
| } | ||
| /* | ||
| * @author Mat Groves | ||
| * | ||
| * Big thanks to the very clever Matt DesLauriers <mattdesl> https://github.com/mattdesl/ | ||
| * for creating the original PixiJS version! | ||
| * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they | ||
| * now share 4 bytes on the vertex buffer | ||
| * | ||
| * Heavily inspired by LibGDX's CanvasGraphicsRenderer: | ||
| * https://github.com/libgdx/libgdx/blob/1.0.0/gdx/src/com/badlogic/gdx/graphics/glutils/ShapeRenderer.java | ||
| */ | ||
| /** | ||
| * Renderer dedicated to drawing and batching graphics objects. | ||
| * @class | ||
| * @protected | ||
| * @memberof PIXI | ||
| */ | ||
| var CanvasGraphicsRenderer = /** @class */ (function () { | ||
| /** | ||
| * @param renderer - A reference to the current renderer. | ||
| */ | ||
| function CanvasGraphicsRenderer(renderer) { | ||
| this._svgMatrix = null; | ||
| this._tempMatrix = new math.Matrix(); | ||
| this.renderer = renderer; | ||
| class CanvasGraphicsRenderer { | ||
| constructor(renderer) { | ||
| this._svgMatrix = null; | ||
| this._tempMatrix = new core.Matrix(); | ||
| this.renderer = renderer; | ||
| } | ||
| _calcCanvasStyle(style, tint) { | ||
| let res; | ||
| if (style.texture && style.texture.baseTexture !== core.Texture.WHITE.baseTexture) { | ||
| if (style.texture.valid) { | ||
| res = canvasRenderer$1.canvasUtils.getTintedPattern(style.texture, tint); | ||
| this.setPatternTransform(res, style.matrix || core.Matrix.IDENTITY); | ||
| } else { | ||
| res = "#808080"; | ||
| } | ||
| } else { | ||
| res = `#${`00000${(tint | 0).toString(16)}`.slice(-6)}`; | ||
| } | ||
| /** | ||
| * calculates fill/stroke style for canvas | ||
| * @private | ||
| * @param style - A graphics {@link PIXI.FILL_STYLE} where if `texture` is specified then a tinted CanvasPattern | ||
| * will be used for the fill.stroke | ||
| * @param tint - color to set the fill/stroke too. | ||
| */ | ||
| CanvasGraphicsRenderer.prototype._calcCanvasStyle = function (style, tint) { | ||
| var res; | ||
| if (style.texture && style.texture.baseTexture !== core.Texture.WHITE.baseTexture) { | ||
| if (style.texture.valid) { | ||
| res = canvasRenderer$1.canvasUtils.getTintedPattern(style.texture, tint); | ||
| this.setPatternTransform(res, style.matrix || math.Matrix.IDENTITY); | ||
| } | ||
| else { | ||
| res = '#808080'; | ||
| } | ||
| return res; | ||
| } | ||
| render(graphics) { | ||
| const renderer = this.renderer; | ||
| const context = renderer.canvasContext.activeContext; | ||
| const worldAlpha = graphics.worldAlpha; | ||
| const transform = graphics.transform.worldTransform; | ||
| renderer.canvasContext.setContextTransform(transform); | ||
| renderer.canvasContext.setBlendMode(graphics.blendMode); | ||
| const graphicsData = graphics.geometry.graphicsData; | ||
| let contextFillStyle; | ||
| let contextStrokeStyle; | ||
| const tintR = (graphics.tint >> 16 & 255) / 255; | ||
| const tintG = (graphics.tint >> 8 & 255) / 255; | ||
| const tintB = (graphics.tint & 255) / 255; | ||
| for (let i = 0; i < graphicsData.length; i++) { | ||
| const data = graphicsData[i]; | ||
| const shape = data.shape; | ||
| const fillStyle = data.fillStyle; | ||
| const lineStyle = data.lineStyle; | ||
| const fillColor = data.fillStyle.color | 0; | ||
| const lineColor = data.lineStyle.color | 0; | ||
| if (data.matrix) { | ||
| renderer.canvasContext.setContextTransform(transform.copyTo(this._tempMatrix).append(data.matrix)); | ||
| } | ||
| if (fillStyle.visible) { | ||
| const fillTint = ((fillColor >> 16 & 255) / 255 * tintR * 255 << 16) + ((fillColor >> 8 & 255) / 255 * tintG * 255 << 8) + (fillColor & 255) / 255 * tintB * 255; | ||
| contextFillStyle = this._calcCanvasStyle(fillStyle, fillTint); | ||
| } | ||
| if (lineStyle.visible) { | ||
| const lineTint = ((lineColor >> 16 & 255) / 255 * tintR * 255 << 16) + ((lineColor >> 8 & 255) / 255 * tintG * 255 << 8) + (lineColor & 255) / 255 * tintB * 255; | ||
| contextStrokeStyle = this._calcCanvasStyle(lineStyle, lineTint); | ||
| } | ||
| context.lineWidth = lineStyle.width; | ||
| context.lineCap = lineStyle.cap; | ||
| context.lineJoin = lineStyle.join; | ||
| context.miterLimit = lineStyle.miterLimit; | ||
| if (data.type === core.SHAPES.POLY) { | ||
| context.beginPath(); | ||
| const tempShape = shape; | ||
| let points = tempShape.points; | ||
| const holes = data.holes; | ||
| let outerArea; | ||
| let innerArea; | ||
| let px; | ||
| let py; | ||
| let holesDirection; | ||
| context.moveTo(points[0], points[1]); | ||
| for (let j = 2; j < points.length; j += 2) { | ||
| context.lineTo(points[j], points[j + 1]); | ||
| } | ||
| else { | ||
| res = "#" + ("00000" + (tint | 0).toString(16)).slice(-6); | ||
| if (tempShape.closeStroke) { | ||
| context.closePath(); | ||
| } | ||
| return res; | ||
| }; | ||
| /** | ||
| * Renders a Graphics object to a canvas. | ||
| * @param graphics - the actual graphics object to render | ||
| */ | ||
| CanvasGraphicsRenderer.prototype.render = function (graphics) { | ||
| var renderer = this.renderer; | ||
| var context = renderer.context; | ||
| var worldAlpha = graphics.worldAlpha; | ||
| var transform = graphics.transform.worldTransform; | ||
| renderer.setContextTransform(transform); | ||
| renderer.setBlendMode(graphics.blendMode); | ||
| var graphicsData = graphics.geometry.graphicsData; | ||
| var contextFillStyle; | ||
| var contextStrokeStyle; | ||
| var tintR = ((graphics.tint >> 16) & 0xFF) / 255; | ||
| var tintG = ((graphics.tint >> 8) & 0xFF) / 255; | ||
| var tintB = (graphics.tint & 0xFF) / 255; | ||
| for (var i = 0; i < graphicsData.length; i++) { | ||
| var data = graphicsData[i]; | ||
| var shape = data.shape; | ||
| var fillStyle = data.fillStyle; | ||
| var lineStyle = data.lineStyle; | ||
| var fillColor = data.fillStyle.color | 0; | ||
| var lineColor = data.lineStyle.color | 0; | ||
| if (data.matrix) { | ||
| renderer.setContextTransform(transform.copyTo(this._tempMatrix).append(data.matrix)); | ||
| if (holes.length > 0) { | ||
| holesDirection = []; | ||
| outerArea = 0; | ||
| px = points[0]; | ||
| py = points[1]; | ||
| for (let j = 2; j + 2 < points.length; j += 2) { | ||
| outerArea += (points[j] - px) * (points[j + 3] - py) - (points[j + 2] - px) * (points[j + 1] - py); | ||
| } | ||
| for (let k = 0; k < holes.length; k++) { | ||
| points = holes[k].shape.points; | ||
| if (!points) { | ||
| continue; | ||
| } | ||
| if (fillStyle.visible) { | ||
| var fillTint = ((((fillColor >> 16) & 0xFF) / 255 * tintR * 255 << 16) | ||
| + (((fillColor >> 8) & 0xFF) / 255 * tintG * 255 << 8) | ||
| + (((fillColor & 0xFF) / 255) * tintB * 255)); | ||
| contextFillStyle = this._calcCanvasStyle(fillStyle, fillTint); | ||
| innerArea = 0; | ||
| px = points[0]; | ||
| py = points[1]; | ||
| for (let j = 2; j + 2 < points.length; j += 2) { | ||
| innerArea += (points[j] - px) * (points[j + 3] - py) - (points[j + 2] - px) * (points[j + 1] - py); | ||
| } | ||
| if (lineStyle.visible) { | ||
| var lineTint = ((((lineColor >> 16) & 0xFF) / 255 * tintR * 255 << 16) | ||
| + (((lineColor >> 8) & 0xFF) / 255 * tintG * 255 << 8) | ||
| + (((lineColor & 0xFF) / 255) * tintB * 255)); | ||
| contextStrokeStyle = this._calcCanvasStyle(lineStyle, lineTint); | ||
| if (innerArea * outerArea < 0) { | ||
| context.moveTo(points[0], points[1]); | ||
| for (let j = 2; j < points.length; j += 2) { | ||
| context.lineTo(points[j], points[j + 1]); | ||
| } | ||
| } else { | ||
| context.moveTo(points[points.length - 2], points[points.length - 1]); | ||
| for (let j = points.length - 4; j >= 0; j -= 2) { | ||
| context.lineTo(points[j], points[j + 1]); | ||
| } | ||
| } | ||
| context.lineWidth = lineStyle.width; | ||
| context.lineCap = lineStyle.cap; | ||
| context.lineJoin = lineStyle.join; | ||
| context.miterLimit = lineStyle.miterLimit; | ||
| if (data.type === math.SHAPES.POLY) { | ||
| context.beginPath(); | ||
| var tempShape = shape; | ||
| var points = tempShape.points; | ||
| var holes = data.holes; | ||
| var outerArea = void 0; | ||
| var innerArea = void 0; | ||
| var px = void 0; | ||
| var py = void 0; | ||
| var holesDirection = void 0; | ||
| context.moveTo(points[0], points[1]); | ||
| for (var j = 2; j < points.length; j += 2) { | ||
| context.lineTo(points[j], points[j + 1]); | ||
| } | ||
| if (tempShape.closeStroke) { | ||
| context.closePath(); | ||
| } | ||
| if (holes.length > 0) { | ||
| holesDirection = []; | ||
| outerArea = 0; | ||
| px = points[0]; | ||
| py = points[1]; | ||
| for (var j = 2; j + 2 < points.length; j += 2) { | ||
| outerArea += ((points[j] - px) * (points[j + 3] - py)) | ||
| - ((points[j + 2] - px) * (points[j + 1] - py)); | ||
| } | ||
| for (var k = 0; k < holes.length; k++) { | ||
| points = holes[k].shape.points; | ||
| if (!points) { | ||
| continue; | ||
| } | ||
| innerArea = 0; | ||
| px = points[0]; | ||
| py = points[1]; | ||
| for (var j = 2; j + 2 < points.length; j += 2) { | ||
| innerArea += ((points[j] - px) * (points[j + 3] - py)) | ||
| - ((points[j + 2] - px) * (points[j + 1] - py)); | ||
| } | ||
| if (innerArea * outerArea < 0) { | ||
| context.moveTo(points[0], points[1]); | ||
| for (var j = 2; j < points.length; j += 2) { | ||
| context.lineTo(points[j], points[j + 1]); | ||
| } | ||
| } | ||
| else { | ||
| context.moveTo(points[points.length - 2], points[points.length - 1]); | ||
| for (var j = points.length - 4; j >= 0; j -= 2) { | ||
| context.lineTo(points[j], points[j + 1]); | ||
| } | ||
| } | ||
| if (holes[k].shape.closeStroke) { | ||
| context.closePath(); | ||
| } | ||
| holesDirection[k] = innerArea * outerArea < 0; | ||
| } | ||
| } | ||
| if (fillStyle.visible) { | ||
| context.globalAlpha = fillStyle.alpha * worldAlpha; | ||
| context.fillStyle = contextFillStyle; | ||
| context.fill(); | ||
| } | ||
| if (lineStyle.visible) { | ||
| this.paintPolygonStroke(tempShape, lineStyle, contextStrokeStyle, holes, holesDirection, worldAlpha, context); | ||
| } | ||
| if (holes[k].shape.closeStroke) { | ||
| context.closePath(); | ||
| } | ||
| else if (data.type === math.SHAPES.RECT) { | ||
| var tempShape = shape; | ||
| if (fillStyle.visible) { | ||
| context.globalAlpha = fillStyle.alpha * worldAlpha; | ||
| context.fillStyle = contextFillStyle; | ||
| context.fillRect(tempShape.x, tempShape.y, tempShape.width, tempShape.height); | ||
| } | ||
| if (lineStyle.visible) { | ||
| var alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment)); | ||
| var width = tempShape.width + (2 * alignmentOffset); | ||
| var height = tempShape.height + (2 * alignmentOffset); | ||
| context.globalAlpha = lineStyle.alpha * worldAlpha; | ||
| context.strokeStyle = contextStrokeStyle; | ||
| context.strokeRect(tempShape.x - alignmentOffset, tempShape.y - alignmentOffset, width, height); | ||
| } | ||
| } | ||
| else if (data.type === math.SHAPES.CIRC) { | ||
| var tempShape = shape; | ||
| // TODO - need to be Undefined! | ||
| context.beginPath(); | ||
| context.arc(tempShape.x, tempShape.y, tempShape.radius, 0, 2 * Math.PI); | ||
| context.closePath(); | ||
| if (fillStyle.visible) { | ||
| context.globalAlpha = fillStyle.alpha * worldAlpha; | ||
| context.fillStyle = contextFillStyle; | ||
| context.fill(); | ||
| } | ||
| if (lineStyle.visible) { | ||
| if (lineStyle.alignment !== 0.5) { | ||
| var alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment)); | ||
| context.beginPath(); | ||
| context.arc(tempShape.x, tempShape.y, tempShape.radius + alignmentOffset, 0, 2 * Math.PI); | ||
| context.closePath(); | ||
| } | ||
| context.globalAlpha = lineStyle.alpha * worldAlpha; | ||
| context.strokeStyle = contextStrokeStyle; | ||
| context.stroke(); | ||
| } | ||
| } | ||
| else if (data.type === math.SHAPES.ELIP) { | ||
| var tempShape = shape; | ||
| var drawShapeOverStroke = lineStyle.alignment === 1; | ||
| if (!drawShapeOverStroke) { | ||
| this.paintEllipse(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context); | ||
| } | ||
| if (lineStyle.visible) { | ||
| if (lineStyle.alignment !== 0.5) { | ||
| var kappa = 0.5522848; | ||
| var alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment)); | ||
| var sW = (tempShape.width + alignmentOffset) * 2; | ||
| var sH = (tempShape.height + alignmentOffset) * 2; | ||
| var sX = tempShape.x - (sW / 2); | ||
| var sY = tempShape.y - (sH / 2); | ||
| var sOx = (sW / 2) * kappa; | ||
| var sOy = (sH / 2) * kappa; | ||
| var sXe = sX + sW; | ||
| var sYe = sY + sH; | ||
| var sXm = sX + (sW / 2); | ||
| var sYm = sY + (sH / 2); | ||
| context.beginPath(); | ||
| context.moveTo(sX, sYm); | ||
| context.bezierCurveTo(sX, sYm - sOy, sXm - sOx, sY, sXm, sY); | ||
| context.bezierCurveTo(sXm + sOx, sY, sXe, sYm - sOy, sXe, sYm); | ||
| context.bezierCurveTo(sXe, sYm + sOy, sXm + sOx, sYe, sXm, sYe); | ||
| context.bezierCurveTo(sXm - sOx, sYe, sX, sYm + sOy, sX, sYm); | ||
| context.closePath(); | ||
| } | ||
| context.globalAlpha = lineStyle.alpha * worldAlpha; | ||
| context.strokeStyle = contextStrokeStyle; | ||
| context.stroke(); | ||
| } | ||
| if (drawShapeOverStroke) { | ||
| this.paintEllipse(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context); | ||
| } | ||
| } | ||
| else if (data.type === math.SHAPES.RREC) { | ||
| var tempShape = shape; | ||
| var drawShapeOverStroke = lineStyle.alignment === 1; | ||
| if (!drawShapeOverStroke) { | ||
| this.paintRoundedRectangle(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context); | ||
| } | ||
| if (lineStyle.visible) { | ||
| if (lineStyle.alignment !== 0.5) { | ||
| var width = tempShape.width; | ||
| var height = tempShape.height; | ||
| var alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment)); | ||
| var sRx = tempShape.x - alignmentOffset; | ||
| var sRy = tempShape.y - alignmentOffset; | ||
| var sWidth = tempShape.width + (2 * alignmentOffset); | ||
| var sHeight = tempShape.height + (2 * alignmentOffset); | ||
| var radiusOffset = alignmentOffset * (lineStyle.alignment >= 1 | ||
| ? Math.min(sWidth / width, sHeight / height) : Math.min(width / sWidth, height / sHeight)); | ||
| var sRadius = tempShape.radius + radiusOffset; | ||
| var sMaxRadius = Math.min(sWidth, sHeight) / 2; | ||
| sRadius = sRadius > sMaxRadius ? sMaxRadius : sRadius; | ||
| context.beginPath(); | ||
| context.moveTo(sRx, sRy + sRadius); | ||
| context.lineTo(sRx, sRy + sHeight - sRadius); | ||
| context.quadraticCurveTo(sRx, sRy + sHeight, sRx + sRadius, sRy + sHeight); | ||
| context.lineTo(sRx + sWidth - sRadius, sRy + sHeight); | ||
| context.quadraticCurveTo(sRx + sWidth, sRy + sHeight, sRx + sWidth, sRy + sHeight - sRadius); | ||
| context.lineTo(sRx + sWidth, sRy + sRadius); | ||
| context.quadraticCurveTo(sRx + sWidth, sRy, sRx + sWidth - sRadius, sRy); | ||
| context.lineTo(sRx + sRadius, sRy); | ||
| context.quadraticCurveTo(sRx, sRy, sRx, sRy + sRadius); | ||
| context.closePath(); | ||
| } | ||
| context.globalAlpha = lineStyle.alpha * worldAlpha; | ||
| context.strokeStyle = contextStrokeStyle; | ||
| context.stroke(); | ||
| } | ||
| if (drawShapeOverStroke) { | ||
| this.paintRoundedRectangle(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context); | ||
| } | ||
| } | ||
| holesDirection[k] = innerArea * outerArea < 0; | ||
| } | ||
| } | ||
| }; | ||
| /** | ||
| * Paint stroke for polygon and holes | ||
| * @private | ||
| * @param shape - Shape to be drawn | ||
| * @param lineStyle - Line style for the shape | ||
| * @param contextStrokeStyle - The strokeStyle for the canvas context | ||
| * @param holes - Holes to be added to the shape | ||
| * @param holesDirection - | ||
| * @param worldAlpha - The multiplied alpha of the displayObject | ||
| * @param context - The canvas context | ||
| */ | ||
| CanvasGraphicsRenderer.prototype.paintPolygonStroke = function (shape, lineStyle, contextStrokeStyle, holes, holesDirection, worldAlpha, context) { | ||
| if (lineStyle.alignment !== 0.5) { | ||
| var alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment)); | ||
| var offsetPoints = PolygonUtils.offsetPolygon(shape.points, alignmentOffset); | ||
| var points = void 0; | ||
| context.beginPath(); | ||
| context.moveTo(offsetPoints[0], offsetPoints[1]); | ||
| for (var j = 2; j < offsetPoints.length; j += 2) { | ||
| context.lineTo(offsetPoints[j], offsetPoints[j + 1]); | ||
| } | ||
| if (shape.closeStroke) { | ||
| context.closePath(); | ||
| } | ||
| for (var k = 0; k < holes.length; k++) { | ||
| points = holes[k].shape.points; | ||
| offsetPoints = PolygonUtils.offsetPolygon(points, alignmentOffset); | ||
| if (holesDirection[k]) { | ||
| context.moveTo(offsetPoints[0], offsetPoints[1]); | ||
| for (var j = 2; j < offsetPoints.length; j += 2) { | ||
| context.lineTo(offsetPoints[j], offsetPoints[j + 1]); | ||
| } | ||
| } | ||
| else { | ||
| context.moveTo(offsetPoints[offsetPoints.length - 2], offsetPoints[offsetPoints.length - 1]); | ||
| for (var j = offsetPoints.length - 4; j >= 0; j -= 2) { | ||
| context.lineTo(offsetPoints[j], offsetPoints[j + 1]); | ||
| } | ||
| } | ||
| if (holes[k].shape.closeStroke) { | ||
| context.closePath(); | ||
| } | ||
| } | ||
| if (fillStyle.visible) { | ||
| context.globalAlpha = fillStyle.alpha * worldAlpha; | ||
| context.fillStyle = contextFillStyle; | ||
| context.fill(); | ||
| } | ||
| context.globalAlpha = lineStyle.alpha * worldAlpha; | ||
| context.strokeStyle = contextStrokeStyle; | ||
| context.stroke(); | ||
| }; | ||
| /** | ||
| * Paint Ellipse | ||
| * @private | ||
| * @param shape - Shape to be drawn | ||
| * @param fillStyle - Fill for the shape | ||
| * @param lineStyle - Line style for the shape | ||
| * @param contextFillStyle - The canvas context fill style | ||
| * @param worldAlpha - The multiplied alpha of the displayObject | ||
| * @param context - The canvas context | ||
| */ | ||
| CanvasGraphicsRenderer.prototype.paintEllipse = function (shape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context) { | ||
| // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas | ||
| var w = shape.width * 2; | ||
| var h = shape.height * 2; | ||
| var x = shape.x - (w / 2); | ||
| var y = shape.y - (h / 2); | ||
| var kappa = 0.5522848; | ||
| var ox = (w / 2) * kappa; // control point offset horizontal | ||
| var oy = (h / 2) * kappa; // control point offset vertical | ||
| var xe = x + w; // x-end | ||
| var ye = y + h; // y-end | ||
| var xm = x + (w / 2); // x-middle | ||
| var ym = y + (h / 2); // y-middle | ||
| if (lineStyle.alignment === 0) { | ||
| context.save(); | ||
| if (lineStyle.visible) { | ||
| this.paintPolygonStroke(tempShape, lineStyle, contextStrokeStyle, holes, holesDirection, worldAlpha, context); | ||
| } | ||
| } else if (data.type === core.SHAPES.RECT) { | ||
| const tempShape = shape; | ||
| if (fillStyle.visible) { | ||
| context.globalAlpha = fillStyle.alpha * worldAlpha; | ||
| context.fillStyle = contextFillStyle; | ||
| context.fillRect(tempShape.x, tempShape.y, tempShape.width, tempShape.height); | ||
| } | ||
| if (lineStyle.visible) { | ||
| const alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment)); | ||
| const width = tempShape.width + 2 * alignmentOffset; | ||
| const height = tempShape.height + 2 * alignmentOffset; | ||
| context.globalAlpha = lineStyle.alpha * worldAlpha; | ||
| context.strokeStyle = contextStrokeStyle; | ||
| context.strokeRect(tempShape.x - alignmentOffset, tempShape.y - alignmentOffset, width, height); | ||
| } | ||
| } else if (data.type === core.SHAPES.CIRC) { | ||
| const tempShape = shape; | ||
| context.beginPath(); | ||
| context.moveTo(x, ym); | ||
| context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y); | ||
| context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym); | ||
| context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye); | ||
| context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); | ||
| context.arc(tempShape.x, tempShape.y, tempShape.radius, 0, 2 * Math.PI); | ||
| context.closePath(); | ||
| if (lineStyle.alignment === 0) { | ||
| context.clip(); | ||
| } | ||
| if (fillStyle.visible) { | ||
| context.globalAlpha = fillStyle.alpha * worldAlpha; | ||
| context.fillStyle = contextFillStyle; | ||
| context.fill(); | ||
| context.globalAlpha = fillStyle.alpha * worldAlpha; | ||
| context.fillStyle = contextFillStyle; | ||
| context.fill(); | ||
| } | ||
| if (lineStyle.alignment === 0) { | ||
| context.restore(); | ||
| if (lineStyle.visible) { | ||
| if (lineStyle.alignment !== 0.5) { | ||
| const alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment)); | ||
| context.beginPath(); | ||
| context.arc(tempShape.x, tempShape.y, tempShape.radius + alignmentOffset, 0, 2 * Math.PI); | ||
| context.closePath(); | ||
| } | ||
| context.globalAlpha = lineStyle.alpha * worldAlpha; | ||
| context.strokeStyle = contextStrokeStyle; | ||
| context.stroke(); | ||
| } | ||
| }; | ||
| /** | ||
| * Paint Rounded Rectangle | ||
| * @private | ||
| * @param shape - Shape to be drawn | ||
| * @param fillStyle - Fill for the shape | ||
| * @param lineStyle - Line style for the shape | ||
| * @param contextFillStyle - The canvas context fill style | ||
| * @param worldAlpha - The multiplied alpha of the displayObject | ||
| * @param context - The canvas context | ||
| */ | ||
| CanvasGraphicsRenderer.prototype.paintRoundedRectangle = function (shape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context) { | ||
| var rx = shape.x; | ||
| var ry = shape.y; | ||
| var width = shape.width; | ||
| var height = shape.height; | ||
| var radius = shape.radius; | ||
| var maxRadius = Math.min(width, height) / 2; | ||
| radius = radius > maxRadius ? maxRadius : radius; | ||
| if (lineStyle.alignment === 0) { | ||
| context.save(); | ||
| } else if (data.type === core.SHAPES.ELIP) { | ||
| const tempShape = shape; | ||
| const drawShapeOverStroke = lineStyle.alignment === 1; | ||
| if (!drawShapeOverStroke) { | ||
| this.paintEllipse(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context); | ||
| } | ||
| context.beginPath(); | ||
| context.moveTo(rx, ry + radius); | ||
| context.lineTo(rx, ry + height - radius); | ||
| context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height); | ||
| context.lineTo(rx + width - radius, ry + height); | ||
| context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius); | ||
| context.lineTo(rx + width, ry + radius); | ||
| context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry); | ||
| context.lineTo(rx + radius, ry); | ||
| context.quadraticCurveTo(rx, ry, rx, ry + radius); | ||
| context.closePath(); | ||
| if (lineStyle.alignment === 0) { | ||
| context.clip(); | ||
| if (lineStyle.visible) { | ||
| if (lineStyle.alignment !== 0.5) { | ||
| const kappa = 0.5522848; | ||
| const alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment)); | ||
| const sW = (tempShape.width + alignmentOffset) * 2; | ||
| const sH = (tempShape.height + alignmentOffset) * 2; | ||
| const sX = tempShape.x - sW / 2; | ||
| const sY = tempShape.y - sH / 2; | ||
| const sOx = sW / 2 * kappa; | ||
| const sOy = sH / 2 * kappa; | ||
| const sXe = sX + sW; | ||
| const sYe = sY + sH; | ||
| const sXm = sX + sW / 2; | ||
| const sYm = sY + sH / 2; | ||
| context.beginPath(); | ||
| context.moveTo(sX, sYm); | ||
| context.bezierCurveTo(sX, sYm - sOy, sXm - sOx, sY, sXm, sY); | ||
| context.bezierCurveTo(sXm + sOx, sY, sXe, sYm - sOy, sXe, sYm); | ||
| context.bezierCurveTo(sXe, sYm + sOy, sXm + sOx, sYe, sXm, sYe); | ||
| context.bezierCurveTo(sXm - sOx, sYe, sX, sYm + sOy, sX, sYm); | ||
| context.closePath(); | ||
| } | ||
| context.globalAlpha = lineStyle.alpha * worldAlpha; | ||
| context.strokeStyle = contextStrokeStyle; | ||
| context.stroke(); | ||
| } | ||
| if (fillStyle.visible) { | ||
| context.globalAlpha = fillStyle.alpha * worldAlpha; | ||
| context.fillStyle = contextFillStyle; | ||
| context.fill(); | ||
| if (drawShapeOverStroke) { | ||
| this.paintEllipse(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context); | ||
| } | ||
| if (lineStyle.alignment === 0) { | ||
| context.restore(); | ||
| } else if (data.type === core.SHAPES.RREC) { | ||
| const tempShape = shape; | ||
| const drawShapeOverStroke = lineStyle.alignment === 1; | ||
| if (!drawShapeOverStroke) { | ||
| this.paintRoundedRectangle(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context); | ||
| } | ||
| }; | ||
| CanvasGraphicsRenderer.prototype.setPatternTransform = function (pattern, matrix) { | ||
| if (this._svgMatrix === false) { | ||
| return; | ||
| if (lineStyle.visible) { | ||
| if (lineStyle.alignment !== 0.5) { | ||
| const width = tempShape.width; | ||
| const height = tempShape.height; | ||
| const alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment)); | ||
| const sRx = tempShape.x - alignmentOffset; | ||
| const sRy = tempShape.y - alignmentOffset; | ||
| const sWidth = tempShape.width + 2 * alignmentOffset; | ||
| const sHeight = tempShape.height + 2 * alignmentOffset; | ||
| const radiusOffset = alignmentOffset * (lineStyle.alignment >= 1 ? Math.min(sWidth / width, sHeight / height) : Math.min(width / sWidth, height / sHeight)); | ||
| let sRadius = tempShape.radius + radiusOffset; | ||
| const sMaxRadius = Math.min(sWidth, sHeight) / 2; | ||
| sRadius = sRadius > sMaxRadius ? sMaxRadius : sRadius; | ||
| context.beginPath(); | ||
| context.moveTo(sRx, sRy + sRadius); | ||
| context.lineTo(sRx, sRy + sHeight - sRadius); | ||
| context.quadraticCurveTo(sRx, sRy + sHeight, sRx + sRadius, sRy + sHeight); | ||
| context.lineTo(sRx + sWidth - sRadius, sRy + sHeight); | ||
| context.quadraticCurveTo(sRx + sWidth, sRy + sHeight, sRx + sWidth, sRy + sHeight - sRadius); | ||
| context.lineTo(sRx + sWidth, sRy + sRadius); | ||
| context.quadraticCurveTo(sRx + sWidth, sRy, sRx + sWidth - sRadius, sRy); | ||
| context.lineTo(sRx + sRadius, sRy); | ||
| context.quadraticCurveTo(sRx, sRy, sRx, sRy + sRadius); | ||
| context.closePath(); | ||
| } | ||
| context.globalAlpha = lineStyle.alpha * worldAlpha; | ||
| context.strokeStyle = contextStrokeStyle; | ||
| context.stroke(); | ||
| } | ||
| if (!this._svgMatrix) { | ||
| var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); | ||
| if (svg && svg.createSVGMatrix) { | ||
| this._svgMatrix = svg.createSVGMatrix(); | ||
| } | ||
| if (!this._svgMatrix || !pattern.setTransform) { | ||
| this._svgMatrix = false; | ||
| return; | ||
| } | ||
| if (drawShapeOverStroke) { | ||
| this.paintRoundedRectangle(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context); | ||
| } | ||
| this._svgMatrix.a = matrix.a; | ||
| this._svgMatrix.b = matrix.b; | ||
| this._svgMatrix.c = matrix.c; | ||
| this._svgMatrix.d = matrix.d; | ||
| this._svgMatrix.e = matrix.tx; | ||
| this._svgMatrix.f = matrix.ty; | ||
| pattern.setTransform(this._svgMatrix.inverse()); | ||
| }; | ||
| /** destroy graphics object */ | ||
| CanvasGraphicsRenderer.prototype.destroy = function () { | ||
| this.renderer = null; | ||
| this._svgMatrix = null; | ||
| this._tempMatrix = null; | ||
| }; | ||
| /** @ignore */ | ||
| CanvasGraphicsRenderer.extension = { | ||
| name: 'graphics', | ||
| type: core.ExtensionType.CanvasRendererPlugin, | ||
| }; | ||
| return CanvasGraphicsRenderer; | ||
| }()); | ||
| var canvasRenderer; | ||
| var tempMatrix = new math.Matrix(); | ||
| /** | ||
| * Generates a canvas texture. Only available with **pixi.js-legacy** bundle | ||
| * or the **@pixi/canvas-graphics** package. | ||
| * @method generateCanvasTexture | ||
| * @memberof PIXI.Graphics# | ||
| * @param {PIXI.SCALE_MODES} [scaleMode] - The scale mode of the texture. | ||
| * @param {number} resolution - The resolution of the texture. | ||
| * @returns {PIXI.Texture} The new texture. | ||
| */ | ||
| graphics.Graphics.prototype.generateCanvasTexture = function generateCanvasTexture(scaleMode, resolution) { | ||
| if (resolution === void 0) { resolution = 1; } | ||
| var bounds = this.getLocalBounds(); | ||
| var canvasBuffer = core.RenderTexture.create({ | ||
| width: bounds.width, | ||
| height: bounds.height, | ||
| scaleMode: scaleMode, | ||
| resolution: resolution, | ||
| }); | ||
| if (!canvasRenderer) { | ||
| canvasRenderer = new canvasRenderer$1.CanvasRenderer(); | ||
| } | ||
| } | ||
| this.transform.updateLocalTransform(); | ||
| this.transform.localTransform.copyTo(tempMatrix); | ||
| tempMatrix.invert(); | ||
| tempMatrix.tx -= bounds.x; | ||
| tempMatrix.ty -= bounds.y; | ||
| canvasRenderer.render(this, { renderTexture: canvasBuffer, clear: true, transform: tempMatrix }); | ||
| var texture = core.Texture.from(canvasBuffer.baseTexture._canvasRenderTarget.canvas, { | ||
| scaleMode: scaleMode, | ||
| }); | ||
| texture.baseTexture.setResolution(resolution); | ||
| return texture; | ||
| } | ||
| paintPolygonStroke(shape, lineStyle, contextStrokeStyle, holes, holesDirection, worldAlpha, context) { | ||
| if (lineStyle.alignment !== 0.5) { | ||
| const alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment)); | ||
| let offsetPoints = PolygonUtils.offsetPolygon(shape.points, alignmentOffset); | ||
| let points; | ||
| context.beginPath(); | ||
| context.moveTo(offsetPoints[0], offsetPoints[1]); | ||
| for (let j = 2; j < offsetPoints.length; j += 2) { | ||
| context.lineTo(offsetPoints[j], offsetPoints[j + 1]); | ||
| } | ||
| if (shape.closeStroke) { | ||
| context.closePath(); | ||
| } | ||
| for (let k = 0; k < holes.length; k++) { | ||
| points = holes[k].shape.points; | ||
| offsetPoints = PolygonUtils.offsetPolygon(points, alignmentOffset); | ||
| if (holesDirection[k]) { | ||
| context.moveTo(offsetPoints[0], offsetPoints[1]); | ||
| for (let j = 2; j < offsetPoints.length; j += 2) { | ||
| context.lineTo(offsetPoints[j], offsetPoints[j + 1]); | ||
| } | ||
| } else { | ||
| context.moveTo(offsetPoints[offsetPoints.length - 2], offsetPoints[offsetPoints.length - 1]); | ||
| for (let j = offsetPoints.length - 4; j >= 0; j -= 2) { | ||
| context.lineTo(offsetPoints[j], offsetPoints[j + 1]); | ||
| } | ||
| } | ||
| if (holes[k].shape.closeStroke) { | ||
| context.closePath(); | ||
| } | ||
| } | ||
| } | ||
| context.globalAlpha = lineStyle.alpha * worldAlpha; | ||
| context.strokeStyle = contextStrokeStyle; | ||
| context.stroke(); | ||
| } | ||
| paintEllipse(shape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context) { | ||
| const w = shape.width * 2; | ||
| const h = shape.height * 2; | ||
| const x = shape.x - w / 2; | ||
| const y = shape.y - h / 2; | ||
| const kappa = 0.5522848; | ||
| const ox = w / 2 * kappa; | ||
| const oy = h / 2 * kappa; | ||
| const xe = x + w; | ||
| const ye = y + h; | ||
| const xm = x + w / 2; | ||
| const ym = y + h / 2; | ||
| if (lineStyle.alignment === 0) { | ||
| context.save(); | ||
| } | ||
| context.beginPath(); | ||
| context.moveTo(x, ym); | ||
| context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y); | ||
| context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym); | ||
| context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye); | ||
| context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); | ||
| context.closePath(); | ||
| if (lineStyle.alignment === 0) { | ||
| context.clip(); | ||
| } | ||
| if (fillStyle.visible) { | ||
| context.globalAlpha = fillStyle.alpha * worldAlpha; | ||
| context.fillStyle = contextFillStyle; | ||
| context.fill(); | ||
| } | ||
| if (lineStyle.alignment === 0) { | ||
| context.restore(); | ||
| } | ||
| } | ||
| paintRoundedRectangle(shape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context) { | ||
| const rx = shape.x; | ||
| const ry = shape.y; | ||
| const width = shape.width; | ||
| const height = shape.height; | ||
| let radius = shape.radius; | ||
| const maxRadius = Math.min(width, height) / 2; | ||
| radius = radius > maxRadius ? maxRadius : radius; | ||
| if (lineStyle.alignment === 0) { | ||
| context.save(); | ||
| } | ||
| context.beginPath(); | ||
| context.moveTo(rx, ry + radius); | ||
| context.lineTo(rx, ry + height - radius); | ||
| context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height); | ||
| context.lineTo(rx + width - radius, ry + height); | ||
| context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius); | ||
| context.lineTo(rx + width, ry + radius); | ||
| context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry); | ||
| context.lineTo(rx + radius, ry); | ||
| context.quadraticCurveTo(rx, ry, rx, ry + radius); | ||
| context.closePath(); | ||
| if (lineStyle.alignment === 0) { | ||
| context.clip(); | ||
| } | ||
| if (fillStyle.visible) { | ||
| context.globalAlpha = fillStyle.alpha * worldAlpha; | ||
| context.fillStyle = contextFillStyle; | ||
| context.fill(); | ||
| } | ||
| if (lineStyle.alignment === 0) { | ||
| context.restore(); | ||
| } | ||
| } | ||
| setPatternTransform(pattern, matrix) { | ||
| if (this._svgMatrix === false) { | ||
| return; | ||
| } | ||
| if (!this._svgMatrix) { | ||
| const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); | ||
| if (svg?.createSVGMatrix) { | ||
| this._svgMatrix = svg.createSVGMatrix(); | ||
| } | ||
| if (!this._svgMatrix || !pattern.setTransform) { | ||
| this._svgMatrix = false; | ||
| return; | ||
| } | ||
| } | ||
| this._svgMatrix.a = matrix.a; | ||
| this._svgMatrix.b = matrix.b; | ||
| this._svgMatrix.c = matrix.c; | ||
| this._svgMatrix.d = matrix.d; | ||
| this._svgMatrix.e = matrix.tx; | ||
| this._svgMatrix.f = matrix.ty; | ||
| pattern.setTransform(this._svgMatrix.inverse()); | ||
| } | ||
| destroy() { | ||
| this.renderer = null; | ||
| this._svgMatrix = null; | ||
| this._tempMatrix = null; | ||
| } | ||
| } | ||
| CanvasGraphicsRenderer.extension = { | ||
| name: "graphics", | ||
| type: core.ExtensionType.CanvasRendererPlugin | ||
| }; | ||
| core.extensions.add(CanvasGraphicsRenderer); | ||
| let canvasRenderer; | ||
| const tempMatrix = new core.Matrix(); | ||
| graphics.Graphics.prototype.generateCanvasTexture = function generateCanvasTexture(scaleMode, resolution = 1) { | ||
| const bounds = this.getLocalBounds(); | ||
| const canvasBuffer = core.RenderTexture.create({ | ||
| width: bounds.width, | ||
| height: bounds.height, | ||
| scaleMode, | ||
| resolution | ||
| }); | ||
| if (!canvasRenderer) { | ||
| canvasRenderer = new canvasRenderer$1.CanvasRenderer(); | ||
| } | ||
| this.transform.updateLocalTransform(); | ||
| this.transform.localTransform.copyTo(tempMatrix); | ||
| tempMatrix.invert(); | ||
| tempMatrix.tx -= bounds.x; | ||
| tempMatrix.ty -= bounds.y; | ||
| canvasRenderer.render(this, { renderTexture: canvasBuffer, clear: true, transform: tempMatrix }); | ||
| const texture = core.Texture.from(canvasBuffer.baseTexture._canvasRenderTarget.canvas, { | ||
| scaleMode | ||
| }); | ||
| texture.baseTexture.setResolution(resolution); | ||
| return texture; | ||
| }; | ||
| graphics.Graphics.prototype.cachedGraphicsData = []; | ||
| /** | ||
| * Renders the object using the Canvas renderer | ||
| * @method _renderCanvas | ||
| * @memberof PIXI.Graphics# | ||
| * @private | ||
| * @param {PIXI.CanvasRenderer} renderer - The renderer | ||
| */ | ||
| graphics.Graphics.prototype._renderCanvas = function _renderCanvas(renderer) { | ||
| if (this.isMask === true) { | ||
| return; | ||
| } | ||
| this.finishPoly(); | ||
| renderer.plugins.graphics.render(this); | ||
| if (this.isMask === true) { | ||
| return; | ||
| } | ||
| this.finishPoly(); | ||
| renderer.plugins.graphics.render(this); | ||
| }; | ||
@@ -620,0 +478,0 @@ |
@@ -1,9 +0,8 @@ | ||
| /*! | ||
| * @pixi/canvas-graphics - v6.5.3 | ||
| * Compiled Fri, 09 Sep 2022 13:55:20 UTC | ||
| "use strict";/*! | ||
| * @pixi/canvas-graphics - v7.0.0-alpha | ||
| * Compiled Fri, 09 Sep 2022 16:09:18 UTC | ||
| * | ||
| * @pixi/canvas-graphics is licensed under the MIT License. | ||
| * http://www.opensource.org/licenses/mit-license | ||
| */ | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("@pixi/core"),i=require("@pixi/math"),r=require("@pixi/canvas-renderer"),a=require("@pixi/graphics"),n=function(){function e(){}return e.offsetPolygon=function(t,i){var r=[],a=t.length;i=e.isPolygonClockwise(t)?i:-1*i;for(var n=0;n<a;n+=2){var o=n-2;o<0&&(o+=a);var l=(n+2)%a,s=t[n]-t[o],h=t[n+1]-t[o+1],v=Math.sqrt(s*s+h*h);s/=v,h/=v;var g=-(h*=i),p=s*=i,c=[t[o]+g,t[o+1]+p],f=[t[n]+g,t[n+1]+p],u=t[l]-t[n],d=t[l+1]-t[n+1];u/=v=Math.sqrt(u*u+d*d),d/=v;var T=-(d*=i),m=u*=i,x=[t[n]+T,t[n+1]+m],y=[t[l]+T,t[l+1]+m],b=e.findIntersection(c[0],c[1],f[0],f[1],x[0],x[1],y[0],y[1]);b&&r.push.apply(r,b)}return r},e.findIntersection=function(e,t,i,r,a,n,o,l){var s=(l-n)*(i-e)-(o-a)*(r-t),h=(o-a)*(t-n)-(l-n)*(e-a);if(0===s)return 0===h&&0===(i-e)*(t-n)-(r-t)*(e-a)?[(e+i)/2,(t+r)/2]:null;var v=h/s;return[e+v*(i-e),t+v*(r-t)]},e.isPolygonClockwise=function(e){for(var t=0,i=0,r=e.length-2;i<e.length;r=i,i+=2)t+=(e[i]-e[r])*(e[i+1]+e[r+1]);return t>0},e}(),o=function(){function e(e){this._svgMatrix=null,this._tempMatrix=new i.Matrix,this.renderer=e}return e.prototype._calcCanvasStyle=function(e,a){var n;return e.texture&&e.texture.baseTexture!==t.Texture.WHITE.baseTexture?e.texture.valid?(n=r.canvasUtils.getTintedPattern(e.texture,a),this.setPatternTransform(n,e.matrix||i.Matrix.IDENTITY)):n="#808080":n="#"+("00000"+(0|a).toString(16)).slice(-6),n},e.prototype.render=function(e){var t=this.renderer,r=t.context,a=e.worldAlpha,n=e.transform.worldTransform;t.setContextTransform(n),t.setBlendMode(e.blendMode);for(var o,l,s=e.geometry.graphicsData,h=(e.tint>>16&255)/255,v=(e.tint>>8&255)/255,g=(255&e.tint)/255,p=0;p<s.length;p++){var c=s[p],f=c.shape,u=c.fillStyle,d=c.lineStyle,T=0|c.fillStyle.color,m=0|c.lineStyle.color;if(c.matrix&&t.setContextTransform(n.copyTo(this._tempMatrix).append(c.matrix)),u.visible){var x=((T>>16&255)/255*h*255<<16)+((T>>8&255)/255*v*255<<8)+(255&T)/255*g*255;o=this._calcCanvasStyle(u,x)}if(d.visible){var y=((m>>16&255)/255*h*255<<16)+((m>>8&255)/255*v*255<<8)+(255&m)/255*g*255;l=this._calcCanvasStyle(d,y)}if(r.lineWidth=d.width,r.lineCap=d.cap,r.lineJoin=d.join,r.miterLimit=d.miterLimit,c.type===i.SHAPES.POLY){r.beginPath();var b=(A=f).points,P=c.holes,S=void 0,M=void 0,C=void 0,w=void 0,_=void 0;r.moveTo(b[0],b[1]);for(var k=2;k<b.length;k+=2)r.lineTo(b[k],b[k+1]);if(A.closeStroke&&r.closePath(),P.length>0){_=[],S=0,C=b[0],w=b[1];for(k=2;k+2<b.length;k+=2)S+=(b[k]-C)*(b[k+3]-w)-(b[k+2]-C)*(b[k+1]-w);for(var R=0;R<P.length;R++)if(b=P[R].shape.points){M=0,C=b[0],w=b[1];for(k=2;k+2<b.length;k+=2)M+=(b[k]-C)*(b[k+3]-w)-(b[k+2]-C)*(b[k+1]-w);if(M*S<0){r.moveTo(b[0],b[1]);for(k=2;k<b.length;k+=2)r.lineTo(b[k],b[k+1])}else{r.moveTo(b[b.length-2],b[b.length-1]);for(k=b.length-4;k>=0;k-=2)r.lineTo(b[k],b[k+1])}P[R].shape.closeStroke&&r.closePath(),_[R]=M*S<0}}u.visible&&(r.globalAlpha=u.alpha*a,r.fillStyle=o,r.fill()),d.visible&&this.paintPolygonStroke(A,d,l,P,_,a,r)}else if(c.type===i.SHAPES.RECT){var A=f;if(u.visible&&(r.globalAlpha=u.alpha*a,r.fillStyle=o,r.fillRect(A.x,A.y,A.width,A.height)),d.visible){var E=d.width*(.5-(1-d.alignment)),q=A.width+2*E,I=A.height+2*E;r.globalAlpha=d.alpha*a,r.strokeStyle=l,r.strokeRect(A.x-E,A.y-E,q,I)}}else if(c.type===i.SHAPES.CIRC){A=f;if(r.beginPath(),r.arc(A.x,A.y,A.radius,0,2*Math.PI),r.closePath(),u.visible&&(r.globalAlpha=u.alpha*a,r.fillStyle=o,r.fill()),d.visible){if(.5!==d.alignment){E=d.width*(.5-(1-d.alignment));r.beginPath(),r.arc(A.x,A.y,A.radius+E,0,2*Math.PI),r.closePath()}r.globalAlpha=d.alpha*a,r.strokeStyle=l,r.stroke()}}else if(c.type===i.SHAPES.ELIP){A=f;if((Y=1===d.alignment)||this.paintEllipse(A,u,d,o,a,r),d.visible){if(.5!==d.alignment){var z=.5522848,G=(E=d.width*(.5-(1-d.alignment)),2*(A.width+E)),H=2*(A.height+E),L=A.x-G/2,D=A.y-H/2,j=G/2*z,B=H/2*z,N=L+G,O=D+H,V=L+G/2,W=D+H/2;r.beginPath(),r.moveTo(L,W),r.bezierCurveTo(L,W-B,V-j,D,V,D),r.bezierCurveTo(V+j,D,N,W-B,N,W),r.bezierCurveTo(N,W+B,V+j,O,V,O),r.bezierCurveTo(V-j,O,L,W+B,L,W),r.closePath()}r.globalAlpha=d.alpha*a,r.strokeStyle=l,r.stroke()}Y&&this.paintEllipse(A,u,d,o,a,r)}else if(c.type===i.SHAPES.RREC){var Y;A=f;if((Y=1===d.alignment)||this.paintRoundedRectangle(A,u,d,o,a,r),d.visible){if(.5!==d.alignment){q=A.width,I=A.height,E=d.width*(.5-(1-d.alignment));var J=A.x-E,U=A.y-E,F=A.width+2*E,K=A.height+2*E,Q=E*(d.alignment>=1?Math.min(F/q,K/I):Math.min(q/F,I/K)),X=A.radius+Q,Z=Math.min(F,K)/2;X=X>Z?Z:X,r.beginPath(),r.moveTo(J,U+X),r.lineTo(J,U+K-X),r.quadraticCurveTo(J,U+K,J+X,U+K),r.lineTo(J+F-X,U+K),r.quadraticCurveTo(J+F,U+K,J+F,U+K-X),r.lineTo(J+F,U+X),r.quadraticCurveTo(J+F,U,J+F-X,U),r.lineTo(J+X,U),r.quadraticCurveTo(J,U,J,U+X),r.closePath()}r.globalAlpha=d.alpha*a,r.strokeStyle=l,r.stroke()}Y&&this.paintRoundedRectangle(A,u,d,o,a,r)}}},e.prototype.paintPolygonStroke=function(e,t,i,r,a,o,l){if(.5!==t.alignment){var s=t.width*(.5-(1-t.alignment)),h=n.offsetPolygon(e.points,s),v=void 0;l.beginPath(),l.moveTo(h[0],h[1]);for(var g=2;g<h.length;g+=2)l.lineTo(h[g],h[g+1]);e.closeStroke&&l.closePath();for(var p=0;p<r.length;p++){if(v=r[p].shape.points,h=n.offsetPolygon(v,s),a[p]){l.moveTo(h[0],h[1]);for(g=2;g<h.length;g+=2)l.lineTo(h[g],h[g+1])}else{l.moveTo(h[h.length-2],h[h.length-1]);for(g=h.length-4;g>=0;g-=2)l.lineTo(h[g],h[g+1])}r[p].shape.closeStroke&&l.closePath()}}l.globalAlpha=t.alpha*o,l.strokeStyle=i,l.stroke()},e.prototype.paintEllipse=function(e,t,i,r,a,n){var o=2*e.width,l=2*e.height,s=e.x-o/2,h=e.y-l/2,v=.5522848,g=o/2*v,p=l/2*v,c=s+o,f=h+l,u=s+o/2,d=h+l/2;0===i.alignment&&n.save(),n.beginPath(),n.moveTo(s,d),n.bezierCurveTo(s,d-p,u-g,h,u,h),n.bezierCurveTo(u+g,h,c,d-p,c,d),n.bezierCurveTo(c,d+p,u+g,f,u,f),n.bezierCurveTo(u-g,f,s,d+p,s,d),n.closePath(),0===i.alignment&&n.clip(),t.visible&&(n.globalAlpha=t.alpha*a,n.fillStyle=r,n.fill()),0===i.alignment&&n.restore()},e.prototype.paintRoundedRectangle=function(e,t,i,r,a,n){var o=e.x,l=e.y,s=e.width,h=e.height,v=e.radius,g=Math.min(s,h)/2;v=v>g?g:v,0===i.alignment&&n.save(),n.beginPath(),n.moveTo(o,l+v),n.lineTo(o,l+h-v),n.quadraticCurveTo(o,l+h,o+v,l+h),n.lineTo(o+s-v,l+h),n.quadraticCurveTo(o+s,l+h,o+s,l+h-v),n.lineTo(o+s,l+v),n.quadraticCurveTo(o+s,l,o+s-v,l),n.lineTo(o+v,l),n.quadraticCurveTo(o,l,o,l+v),n.closePath(),0===i.alignment&&n.clip(),t.visible&&(n.globalAlpha=t.alpha*a,n.fillStyle=r,n.fill()),0===i.alignment&&n.restore()},e.prototype.setPatternTransform=function(e,t){if(!1!==this._svgMatrix){if(!this._svgMatrix){var i=document.createElementNS("http://www.w3.org/2000/svg","svg");if(i&&i.createSVGMatrix&&(this._svgMatrix=i.createSVGMatrix()),!this._svgMatrix||!e.setTransform)return void(this._svgMatrix=!1)}this._svgMatrix.a=t.a,this._svgMatrix.b=t.b,this._svgMatrix.c=t.c,this._svgMatrix.d=t.d,this._svgMatrix.e=t.tx,this._svgMatrix.f=t.ty,e.setTransform(this._svgMatrix.inverse())}},e.prototype.destroy=function(){this.renderer=null,this._svgMatrix=null,this._tempMatrix=null},e.extension={name:"graphics",type:t.ExtensionType.CanvasRendererPlugin},e}(),l=new i.Matrix;a.Graphics.prototype.generateCanvasTexture=function(i,a){void 0===a&&(a=1);var n=this.getLocalBounds(),o=t.RenderTexture.create({width:n.width,height:n.height,scaleMode:i,resolution:a});e||(e=new r.CanvasRenderer),this.transform.updateLocalTransform(),this.transform.localTransform.copyTo(l),l.invert(),l.tx-=n.x,l.ty-=n.y,e.render(this,{renderTexture:o,clear:!0,transform:l});var s=t.Texture.from(o.baseTexture._canvasRenderTarget.canvas,{scaleMode:i});return s.baseTexture.setResolution(a),s},a.Graphics.prototype.cachedGraphicsData=[],a.Graphics.prototype._renderCanvas=function(e){!0!==this.isMask&&(this.finishPoly(),e.plugins.graphics.render(this))},exports.CanvasGraphicsRenderer=o; | ||
| */Object.defineProperty(exports,"__esModule",{value:!0});var w=require("@pixi/core"),D=require("@pixi/canvas-renderer"),H=require("@pixi/graphics");class G{static offsetPolygon(e,i){const t=[],c=e.length;i=G.isPolygonClockwise(e)?i:-1*i;for(let u=0;u<c;u+=2){let a=u-2;a<0&&(a+=c);const s=(u+2)%c;let h=e[u]-e[a],n=e[u+1]-e[a+1],p=Math.sqrt(h*h+n*n);h/=p,n/=p,h*=i,n*=i;const g=-n,d=h,y=[e[a]+g,e[a+1]+d],_=[e[u]+g,e[u+1]+d];let m=e[s]-e[u],r=e[s+1]-e[u+1];p=Math.sqrt(m*m+r*r),m/=p,r/=p,m*=i,r*=i;const S=-r,A=m,o=[e[u]+S,e[u+1]+A],l=[e[s]+S,e[s+1]+A],P=G.findIntersection(y[0],y[1],_[0],_[1],o[0],o[1],l[0],l[1]);P&&t.push(...P)}return t}static findIntersection(e,i,t,c,u,a,s,h){const n=(h-a)*(t-e)-(s-u)*(c-i),p=(s-u)*(i-a)-(h-a)*(e-u),g=(t-e)*(i-a)-(c-i)*(e-u);if(n===0)return p===0&&g===0?[(e+t)/2,(i+c)/2]:null;const d=p/n;return[e+d*(t-e),i+d*(c-i)]}static isPolygonClockwise(e){let i=0;for(let t=0,c=e.length-2;t<e.length;c=t,t+=2)i+=(e[t]-e[c])*(e[t+1]+e[c+1]);return i>0}}class L{constructor(e){this._svgMatrix=null,this._tempMatrix=new w.Matrix,this.renderer=e}_calcCanvasStyle(e,i){let t;return e.texture&&e.texture.baseTexture!==w.Texture.WHITE.baseTexture?e.texture.valid?(t=D.canvasUtils.getTintedPattern(e.texture,i),this.setPatternTransform(t,e.matrix||w.Matrix.IDENTITY)):t="#808080":t=`#${`00000${(i|0).toString(16)}`.slice(-6)}`,t}render(e){const i=this.renderer,t=i.canvasContext.activeContext,c=e.worldAlpha,u=e.transform.worldTransform;i.canvasContext.setContextTransform(u),i.canvasContext.setBlendMode(e.blendMode);const a=e.geometry.graphicsData;let s,h;const n=(e.tint>>16&255)/255,p=(e.tint>>8&255)/255,g=(e.tint&255)/255;for(let d=0;d<a.length;d++){const y=a[d],_=y.shape,m=y.fillStyle,r=y.lineStyle,S=y.fillStyle.color|0,A=y.lineStyle.color|0;if(y.matrix&&i.canvasContext.setContextTransform(u.copyTo(this._tempMatrix).append(y.matrix)),m.visible){const o=((S>>16&255)/255*n*255<<16)+((S>>8&255)/255*p*255<<8)+(S&255)/255*g*255;s=this._calcCanvasStyle(m,o)}if(r.visible){const o=((A>>16&255)/255*n*255<<16)+((A>>8&255)/255*p*255<<8)+(A&255)/255*g*255;h=this._calcCanvasStyle(r,o)}if(t.lineWidth=r.width,t.lineCap=r.cap,t.lineJoin=r.join,t.miterLimit=r.miterLimit,y.type===w.SHAPES.POLY){t.beginPath();const o=_;let l=o.points;const P=y.holes;let R,M,T,f,b;t.moveTo(l[0],l[1]);for(let v=2;v<l.length;v+=2)t.lineTo(l[v],l[v+1]);if(o.closeStroke&&t.closePath(),P.length>0){b=[],R=0,T=l[0],f=l[1];for(let v=2;v+2<l.length;v+=2)R+=(l[v]-T)*(l[v+3]-f)-(l[v+2]-T)*(l[v+1]-f);for(let v=0;v<P.length;v++)if(l=P[v].shape.points,!!l){M=0,T=l[0],f=l[1];for(let x=2;x+2<l.length;x+=2)M+=(l[x]-T)*(l[x+3]-f)-(l[x+2]-T)*(l[x+1]-f);if(M*R<0){t.moveTo(l[0],l[1]);for(let x=2;x<l.length;x+=2)t.lineTo(l[x],l[x+1])}else{t.moveTo(l[l.length-2],l[l.length-1]);for(let x=l.length-4;x>=0;x-=2)t.lineTo(l[x],l[x+1])}P[v].shape.closeStroke&&t.closePath(),b[v]=M*R<0}}m.visible&&(t.globalAlpha=m.alpha*c,t.fillStyle=s,t.fill()),r.visible&&this.paintPolygonStroke(o,r,h,P,b,c,t)}else if(y.type===w.SHAPES.RECT){const o=_;if(m.visible&&(t.globalAlpha=m.alpha*c,t.fillStyle=s,t.fillRect(o.x,o.y,o.width,o.height)),r.visible){const l=r.width*(.5-(1-r.alignment)),P=o.width+2*l,R=o.height+2*l;t.globalAlpha=r.alpha*c,t.strokeStyle=h,t.strokeRect(o.x-l,o.y-l,P,R)}}else if(y.type===w.SHAPES.CIRC){const o=_;if(t.beginPath(),t.arc(o.x,o.y,o.radius,0,2*Math.PI),t.closePath(),m.visible&&(t.globalAlpha=m.alpha*c,t.fillStyle=s,t.fill()),r.visible){if(r.alignment!==.5){const l=r.width*(.5-(1-r.alignment));t.beginPath(),t.arc(o.x,o.y,o.radius+l,0,2*Math.PI),t.closePath()}t.globalAlpha=r.alpha*c,t.strokeStyle=h,t.stroke()}}else if(y.type===w.SHAPES.ELIP){const o=_,l=r.alignment===1;if(l||this.paintEllipse(o,m,r,s,c,t),r.visible){if(r.alignment!==.5){const P=.5522848,R=r.width*(.5-(1-r.alignment)),M=(o.width+R)*2,T=(o.height+R)*2,f=o.x-M/2,b=o.y-T/2,v=M/2*P,x=T/2*P,C=f+M,E=b+T,q=f+M/2,k=b+T/2;t.beginPath(),t.moveTo(f,k),t.bezierCurveTo(f,k-x,q-v,b,q,b),t.bezierCurveTo(q+v,b,C,k-x,C,k),t.bezierCurveTo(C,k+x,q+v,E,q,E),t.bezierCurveTo(q-v,E,f,k+x,f,k),t.closePath()}t.globalAlpha=r.alpha*c,t.strokeStyle=h,t.stroke()}l&&this.paintEllipse(o,m,r,s,c,t)}else if(y.type===w.SHAPES.RREC){const o=_,l=r.alignment===1;if(l||this.paintRoundedRectangle(o,m,r,s,c,t),r.visible){if(r.alignment!==.5){const P=o.width,R=o.height,M=r.width*(.5-(1-r.alignment)),T=o.x-M,f=o.y-M,b=o.width+2*M,v=o.height+2*M,x=M*(r.alignment>=1?Math.min(b/P,v/R):Math.min(P/b,R/v));let C=o.radius+x;const E=Math.min(b,v)/2;C=C>E?E:C,t.beginPath(),t.moveTo(T,f+C),t.lineTo(T,f+v-C),t.quadraticCurveTo(T,f+v,T+C,f+v),t.lineTo(T+b-C,f+v),t.quadraticCurveTo(T+b,f+v,T+b,f+v-C),t.lineTo(T+b,f+C),t.quadraticCurveTo(T+b,f,T+b-C,f),t.lineTo(T+C,f),t.quadraticCurveTo(T,f,T,f+C),t.closePath()}t.globalAlpha=r.alpha*c,t.strokeStyle=h,t.stroke()}l&&this.paintRoundedRectangle(o,m,r,s,c,t)}}}paintPolygonStroke(e,i,t,c,u,a,s){if(i.alignment!==.5){const h=i.width*(.5-(1-i.alignment));let n=G.offsetPolygon(e.points,h),p;s.beginPath(),s.moveTo(n[0],n[1]);for(let g=2;g<n.length;g+=2)s.lineTo(n[g],n[g+1]);e.closeStroke&&s.closePath();for(let g=0;g<c.length;g++){if(p=c[g].shape.points,n=G.offsetPolygon(p,h),u[g]){s.moveTo(n[0],n[1]);for(let d=2;d<n.length;d+=2)s.lineTo(n[d],n[d+1])}else{s.moveTo(n[n.length-2],n[n.length-1]);for(let d=n.length-4;d>=0;d-=2)s.lineTo(n[d],n[d+1])}c[g].shape.closeStroke&&s.closePath()}}s.globalAlpha=i.alpha*a,s.strokeStyle=t,s.stroke()}paintEllipse(e,i,t,c,u,a){const s=e.width*2,h=e.height*2,n=e.x-s/2,p=e.y-h/2,g=.5522848,d=s/2*g,y=h/2*g,_=n+s,m=p+h,r=n+s/2,S=p+h/2;t.alignment===0&&a.save(),a.beginPath(),a.moveTo(n,S),a.bezierCurveTo(n,S-y,r-d,p,r,p),a.bezierCurveTo(r+d,p,_,S-y,_,S),a.bezierCurveTo(_,S+y,r+d,m,r,m),a.bezierCurveTo(r-d,m,n,S+y,n,S),a.closePath(),t.alignment===0&&a.clip(),i.visible&&(a.globalAlpha=i.alpha*u,a.fillStyle=c,a.fill()),t.alignment===0&&a.restore()}paintRoundedRectangle(e,i,t,c,u,a){const s=e.x,h=e.y,n=e.width,p=e.height;let g=e.radius;const d=Math.min(n,p)/2;g=g>d?d:g,t.alignment===0&&a.save(),a.beginPath(),a.moveTo(s,h+g),a.lineTo(s,h+p-g),a.quadraticCurveTo(s,h+p,s+g,h+p),a.lineTo(s+n-g,h+p),a.quadraticCurveTo(s+n,h+p,s+n,h+p-g),a.lineTo(s+n,h+g),a.quadraticCurveTo(s+n,h,s+n-g,h),a.lineTo(s+g,h),a.quadraticCurveTo(s,h,s,h+g),a.closePath(),t.alignment===0&&a.clip(),i.visible&&(a.globalAlpha=i.alpha*u,a.fillStyle=c,a.fill()),t.alignment===0&&a.restore()}setPatternTransform(e,i){if(this._svgMatrix!==!1){if(!this._svgMatrix){const t=document.createElementNS("http://www.w3.org/2000/svg","svg");if(t?.createSVGMatrix&&(this._svgMatrix=t.createSVGMatrix()),!this._svgMatrix||!e.setTransform){this._svgMatrix=!1;return}}this._svgMatrix.a=i.a,this._svgMatrix.b=i.b,this._svgMatrix.c=i.c,this._svgMatrix.d=i.d,this._svgMatrix.e=i.tx,this._svgMatrix.f=i.ty,e.setTransform(this._svgMatrix.inverse())}}destroy(){this.renderer=null,this._svgMatrix=null,this._tempMatrix=null}}L.extension={name:"graphics",type:w.ExtensionType.CanvasRendererPlugin},w.extensions.add(L);let j;const z=new w.Matrix;H.Graphics.prototype.generateCanvasTexture=function(I,e=1){const i=this.getLocalBounds(),t=w.RenderTexture.create({width:i.width,height:i.height,scaleMode:I,resolution:e});j||(j=new D.CanvasRenderer),this.transform.updateLocalTransform(),this.transform.localTransform.copyTo(z),z.invert(),z.tx-=i.x,z.ty-=i.y,j.render(this,{renderTexture:t,clear:!0,transform:z});const c=w.Texture.from(t.baseTexture._canvasRenderTarget.canvas,{scaleMode:I});return c.baseTexture.setResolution(e),c},H.Graphics.prototype.cachedGraphicsData=[],H.Graphics.prototype._renderCanvas=function(I){this.isMask!==!0&&(this.finishPoly(),I.plugins.graphics.render(this))},exports.CanvasGraphicsRenderer=L; | ||
| //# sourceMappingURL=canvas-graphics.min.js.map |
@@ -6,3 +6,3 @@ /// <reference path="./global.d.ts" /> | ||
| import type { Graphics } from '@pixi/graphics'; | ||
| import { Matrix } from '@pixi/math'; | ||
| import { Matrix } from '@pixi/core'; | ||
@@ -9,0 +9,0 @@ /** |
| { | ||
| "name": "@pixi/canvas-graphics", | ||
| "version": "6.5.3", | ||
| "version": "7.0.0-alpha", | ||
| "main": "dist/cjs/canvas-graphics.js", | ||
| "module": "dist/esm/canvas-graphics.mjs", | ||
| "bundle": "dist/browser/canvas-graphics.js", | ||
| "types": "index.d.ts", | ||
@@ -36,15 +35,12 @@ "exports": { | ||
| "files": [ | ||
| "lib", | ||
| "dist", | ||
| "*.d.ts" | ||
| ], | ||
| "peerDependencies": { | ||
| "@pixi/canvas-display": "6.5.3", | ||
| "@pixi/canvas-renderer": "6.5.3", | ||
| "@pixi/constants": "6.5.3", | ||
| "@pixi/core": "6.5.3", | ||
| "@pixi/graphics": "6.5.3", | ||
| "@pixi/math": "6.5.3" | ||
| }, | ||
| "gitHead": "28e6b2841a65837a5e2873a3d5a9c27cabbe795a" | ||
| "pixiRequirements": [ | ||
| "@pixi/canvas-display", | ||
| "@pixi/canvas-renderer", | ||
| "@pixi/core", | ||
| "@pixi/graphics" | ||
| ], | ||
| "gitHead": "da993226df64b804a9c00ed9ee4d011191467b8a" | ||
| } |
@@ -12,6 +12,3 @@ # @pixi/canvas-graphics | ||
| ```js | ||
| import { CanvasGraphicsRenderer } from '@pixi/canvas-graphics'; | ||
| import { extensions } from '@pixi/core'; | ||
| extensions.add(CanvasGraphicsRenderer); | ||
| import '@pixi/canvas-graphics'; | ||
| ``` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Dependency count
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-37.13%
260299
- Number of package files
- decreased by-23.53%
13
- Lines of code
- decreased by-46.11%
1101
- Number of low quality alerts
- increased by100%
2
- Number of lines in readme file
- decreased by-18.75%
13
No dependency changes