Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
zrender - npm Package Compare versions
Comparing version 3.0.8 to 3.0.9
@@ -17,2 +17,3 @@ 'use strict'; | ||
| var BoundingRect = require('./BoundingRect'); | ||
| var dpr = require('../config').devicePixelRatio; | ||
@@ -39,2 +40,3 @@ var CMD = { | ||
| var mathSqrt = Math.sqrt; | ||
| var mathAbs = Math.abs; | ||
@@ -64,2 +66,6 @@ var hasTypedArray = typeof Float32Array != 'undefined'; | ||
| this._y0 = 0; | ||
| // Unit x, Unit y. Provide for avoiding drawing that too short line segment | ||
| this._ux = 0; | ||
| this._uy = 0; | ||
| }; | ||
@@ -83,2 +89,10 @@ | ||
| /** | ||
| * @readOnly | ||
| */ | ||
| setScale: function (sx, sy) { | ||
| this._ux = mathAbs(1 / dpr / sx) || 0; | ||
| this._uy = mathAbs(1 / dpr / sy) || 0; | ||
| }, | ||
| getContext: function () { | ||
@@ -137,9 +151,18 @@ return this._ctx; | ||
| lineTo: function (x, y) { | ||
| var exceedUnit = mathAbs(x - this._xi) > this._ux | ||
| || mathAbs(y - this._yi) > this._uy | ||
| // Force draw the first segment | ||
| || this._len === 0; | ||
| this.addData(CMD.L, x, y); | ||
| if (this._ctx) { | ||
| if (this._ctx && exceedUnit) { | ||
| this._needsDash() ? this._dashedLineTo(x, y) | ||
| : this._ctx.lineTo(x, y); | ||
| } | ||
| this._xi = x; | ||
| this._yi = y; | ||
| if (exceedUnit) { | ||
| this._xi = x; | ||
| this._yi = y; | ||
| } | ||
| return this; | ||
@@ -647,10 +670,37 @@ }, | ||
| var d = this.data; | ||
| for (var i = 0; i < this._len;) { | ||
| var x0, y0; | ||
| var xi, yi; | ||
| var x, y; | ||
| var ux = this._ux; | ||
| var uy = this._uy; | ||
| var len = this._len; | ||
| for (var i = 0; i < len;) { | ||
| var cmd = d[i++]; | ||
| if (i == 1) { | ||
| // 如果第一个命令是 L, C, Q | ||
| // 则 previous point 同绘制命令的第一个 point | ||
| // | ||
| // 第一个命令为 Arc 的情况下会在后面特殊处理 | ||
| xi = d[i]; | ||
| yi = d[i + 1]; | ||
| x0 = xi; | ||
| y0 = yi; | ||
| } | ||
| switch (cmd) { | ||
| case CMD.M: | ||
| ctx.moveTo(d[i++], d[i++]); | ||
| x0 = xi = d[i++]; | ||
| y0 = yi = d[i++]; | ||
| ctx.moveTo(xi, yi); | ||
| break; | ||
| case CMD.L: | ||
| ctx.lineTo(d[i++], d[i++]); | ||
| x = d[i++]; | ||
| y = d[i++]; | ||
| // Not draw too small seg between | ||
| if (mathAbs(x - xi) > ux || mathAbs(y - yi) > uy || i === len - 1) { | ||
| ctx.lineTo(x, y); | ||
| xi = x; | ||
| yi = y; | ||
| } | ||
| break; | ||
@@ -661,5 +711,9 @@ case CMD.C: | ||
| ); | ||
| xi = d[i - 2]; | ||
| yi = d[i - 1]; | ||
| break; | ||
| case CMD.Q: | ||
| ctx.quadraticCurveTo(d[i++], d[i++], d[i++], d[i++]); | ||
| xi = d[i - 2]; | ||
| yi = d[i - 1]; | ||
| break; | ||
@@ -679,2 +733,3 @@ case CMD.A: | ||
| var isEllipse = Math.abs(rx - ry) > 1e-3; | ||
| var endAngle = theta + dTheta; | ||
| if (isEllipse) { | ||
@@ -684,3 +739,3 @@ ctx.translate(cx, cy); | ||
| ctx.scale(scaleX, scaleY); | ||
| ctx.arc(0, 0, r, theta, theta + dTheta, 1 - fs); | ||
| ctx.arc(0, 0, r, theta, endAngle, 1 - fs); | ||
| ctx.scale(1 / scaleX, 1 / scaleY); | ||
@@ -691,6 +746,17 @@ ctx.rotate(-psi); | ||
| else { | ||
| ctx.arc(cx, cy, r, theta, theta + dTheta, 1 - fs); | ||
| ctx.arc(cx, cy, r, theta, endAngle, 1 - fs); | ||
| } | ||
| if (i == 1) { | ||
| // 直接使用 arc 命令 | ||
| // 第一个命令起点还未定义 | ||
| x0 = mathCos(theta) * rx + cx; | ||
| y0 = mathSin(theta) * ry + cy; | ||
| } | ||
| xi = mathCos(endAngle) * rx + cx; | ||
| yi = mathSin(endAngle) * ry + cy; | ||
| break; | ||
| case CMD.R: | ||
| x0 = xi = d[i]; | ||
| y0 = yi = d[i + 1]; | ||
| ctx.rect(d[i++], d[i++], d[i++], d[i++]); | ||
@@ -700,2 +766,4 @@ break; | ||
| ctx.closePath(); | ||
| xi = x0; | ||
| yi = y0; | ||
| } | ||
@@ -702,0 +770,0 @@ } |
@@ -11,3 +11,3 @@ // CompoundPath to improve performance | ||
| paths: [] | ||
| paths: null | ||
| }, | ||
@@ -28,6 +28,12 @@ | ||
| this._updatePathDirty(); | ||
| var paths = this.shape.paths || []; | ||
| var scale = this.getGlobalScale(); | ||
| // Update path scale | ||
| for (var i = 0; i < paths.length; i++) { | ||
| paths[i].path.setScale(scale[0], scale[1]); | ||
| } | ||
| }, | ||
| buildPath: function (ctx, shape) { | ||
| var paths = shape.paths; | ||
| var paths = shape.paths || []; | ||
| for (var i = 0; i < paths.length; i++) { | ||
@@ -47,4 +53,4 @@ paths[i].buildPath(ctx, paths[i].shape); | ||
| this._updatePathDirty(); | ||
| return Path.getBoundingRect.call(this); | ||
| return Path.prototype.getBoundingRect.call(this); | ||
| } | ||
| }); |
@@ -243,2 +243,12 @@ /** | ||
| return this; | ||
| }, | ||
| /** | ||
| * Use given style object | ||
| * @param {Object} obj | ||
| */ | ||
| useStyle: function (obj) { | ||
| this.style = new Style(obj); | ||
| this.dirty(false); | ||
| return this; | ||
| } | ||
@@ -245,0 +255,0 @@ }; |
@@ -32,24 +32,3 @@ 'use strict'; | ||
| type: 'linear', | ||
| updateCanvasGradient: function (shape, ctx) { | ||
| var rect = shape.getBoundingRect(); | ||
| // var size = | ||
| var x = this.x * rect.width + rect.x; | ||
| var x2 = this.x2 * rect.width + rect.x; | ||
| var y = this.y * rect.height + rect.y; | ||
| var y2 = this.y2 * rect.height + rect.y; | ||
| var canvasGradient = ctx.createLinearGradient(x, y, x2, y2); | ||
| var colorStops = this.colorStops; | ||
| for (var i = 0; i < colorStops.length; i++) { | ||
| canvasGradient.addColorStop( | ||
| colorStops[i].offset, colorStops[i].color | ||
| ); | ||
| } | ||
| this.canvasGradient = canvasGradient; | ||
| } | ||
| type: 'linear' | ||
| }; | ||
@@ -56,0 +35,0 @@ |
@@ -60,16 +60,26 @@ /** | ||
| var hasFill = pathHasFill(style); | ||
| var hasFillGradient = hasFill && !!(style.fill.colorStops); | ||
| var hasStrokeGradient = hasStroke && !!(style.stroke.colorStops); | ||
| style.bind(ctx, this); | ||
| this.setTransform(ctx); | ||
| if (this.__dirtyPath) { | ||
| var rect = this.getBoundingRect(); | ||
| // Update gradient because bounding rect may changed | ||
| if (hasFill && (style.fill instanceof Gradient)) { | ||
| style.fill.updateCanvasGradient(this, ctx); | ||
| if (hasFillGradient) { | ||
| this._fillGradient = style.getGradient(ctx, style.fill, rect); | ||
| } | ||
| if (hasStroke && (style.stroke instanceof Gradient)) { | ||
| style.stroke.updateCanvasGradient(this, ctx); | ||
| if (hasStrokeGradient) { | ||
| this._strokeGradient = style.getGradient(ctx, style.stroke, rect); | ||
| } | ||
| } | ||
| // Use the gradient | ||
| if (hasFillGradient) { | ||
| ctx.fillStyle = this._fillGradient; | ||
| } | ||
| if (hasStrokeGradient) { | ||
| ctx.strokeStyle = this._strokeGradient; | ||
| } | ||
| style.bind(ctx, this); | ||
| this.setTransform(ctx); | ||
| var lineDash = style.lineDash; | ||
@@ -80,2 +90,6 @@ var lineDashOffset = style.lineDashOffset; | ||
| // Update path sx, sy | ||
| var scale = this.getGlobalScale(); | ||
| path.setScale(scale[0], scale[1]); | ||
| // Proxy context | ||
@@ -146,6 +160,4 @@ // Rebuild path in following 2 cases | ||
| // 2. Shape is changed | ||
| var rectWithStroke = this._rectWithStroke; | ||
| var rectWithStroke = this._rectWithStroke || (this._rectWithStroke = rect.clone()); | ||
| if (this.__dirty || needsUpdateRect) { | ||
| var rectWithStroke = this._rectWithStroke | ||
| || (this._rectWithStroke = rect.clone()); | ||
| rectWithStroke.copy(rect); | ||
@@ -152,0 +164,0 @@ // FIXME Must after updateTransform |
@@ -29,27 +29,3 @@ 'use strict'; | ||
| type: 'radial', | ||
| updateCanvasGradient: function (shape, ctx) { | ||
| var rect = shape.getBoundingRect(); | ||
| var width = rect.width; | ||
| var height = rect.height; | ||
| var min = Math.min(width, height); | ||
| // var max = Math.max(width, height); | ||
| var x = this.x * width + rect.x; | ||
| var y = this.y * height + rect.y; | ||
| var r = this.r * min; | ||
| var canvasGradient = ctx.createRadialGradient(x, y, 0, x, y, r); | ||
| var colorStops = this.colorStops; | ||
| for (var i = 0; i < colorStops.length; i++) { | ||
| canvasGradient.addColorStop( | ||
| colorStops[i].offset, colorStops[i].color | ||
| ); | ||
| } | ||
| this.canvasGradient = canvasGradient; | ||
| } | ||
| type: 'radial' | ||
| }; | ||
@@ -56,0 +32,0 @@ |
@@ -9,2 +9,3 @@ 'use strict'; | ||
| var curveTool = require('../../core/curve'); | ||
| var vec2 = require('../../core/vector'); | ||
| var quadraticSubdivide = curveTool.quadraticSubdivide; | ||
@@ -14,4 +15,23 @@ var cubicSubdivide = curveTool.cubicSubdivide; | ||
| var cubicAt = curveTool.cubicAt; | ||
| var quadraticDerivativeAt = curveTool.quadraticDerivativeAt; | ||
| var cubicDerivativeAt = curveTool.cubicDerivativeAt; | ||
| var out = []; | ||
| function someVectorAt(shape, t, isTangent) { | ||
| var cpx2 = shape.cpx2; | ||
| var cpy2 = shape.cpy2; | ||
| if (cpx2 === null || cpy2 === null) { | ||
| return [ | ||
| (isTangent ? cubicDerivativeAt : cubicAt)(shape.x1, shape.cpx1, shape.cpx2, shape.x2, t), | ||
| (isTangent ? cubicDerivativeAt : cubicAt)(shape.y1, shape.cpy1, shape.cpy2, shape.y2, t) | ||
| ]; | ||
| } | ||
| else { | ||
| return [ | ||
| (isTangent ? quadraticDerivativeAt : quadraticAt)(shape.x1, shape.cpx1, shape.x2, t), | ||
| (isTangent ? quadraticDerivativeAt : quadraticAt)(shape.y1, shape.cpy1, shape.y2, t) | ||
| ]; | ||
| } | ||
| } | ||
| module.exports = require('../Path').extend({ | ||
@@ -100,23 +120,19 @@ | ||
| * Get point at percent | ||
| * @param {number} percent | ||
| * @param {number} t | ||
| * @return {Array.<number>} | ||
| */ | ||
| pointAt: function (p) { | ||
| var shape = this.shape; | ||
| var cpx2 = shape.cpx2; | ||
| var cpy2 = shape.cpy2; | ||
| if (cpx2 === null || cpy2 === null) { | ||
| return [ | ||
| quadraticAt(shape.x1, shape.cpx1, shape.x2, p), | ||
| quadraticAt(shape.y1, shape.cpy1, shape.y2, p) | ||
| ]; | ||
| } | ||
| else { | ||
| return [ | ||
| cubicAt(shape.x1, shape.cpx1, shape.cpx1, shape.x2, p), | ||
| cubicAt(shape.y1, shape.cpy1, shape.cpy1, shape.y2, p) | ||
| ]; | ||
| } | ||
| pointAt: function (t) { | ||
| return someVectorAt(this.shape, t, false); | ||
| }, | ||
| /** | ||
| * Get tangent at percent | ||
| * @param {number} t | ||
| * @return {Array.<number>} | ||
| */ | ||
| tangentAt: function (t) { | ||
| var p = someVectorAt(this.shape, t, true); | ||
| return vec2.normalize(p, p); | ||
| } | ||
| }); | ||
@@ -150,9 +150,9 @@ /** | ||
| } | ||
| if (fill != null) { | ||
| // Use canvas gradient if has | ||
| ctx.fillStyle = fill.canvasGradient ? fill.canvasGradient : fill; | ||
| // Gradient will be created and set in Path#brush. So ignore it here | ||
| if (fill != null && fill !== 'none' && !fill.colorStops) { | ||
| ctx.fillStyle = fill; | ||
| } | ||
| if (stroke != null) { | ||
| if (stroke != null && stroke !== 'none' && !stroke.colorStops) { | ||
| // Use canvas gradient if has | ||
| ctx.strokeStyle = stroke.canvasGradient ? stroke.canvasGradient : stroke; | ||
| ctx.strokeStyle = stroke; | ||
| } | ||
@@ -202,2 +202,40 @@ this.opacity != null && (ctx.globalAlpha = this.opacity); | ||
| return newStyle; | ||
| }, | ||
| createLinearGradient: function (ctx, obj, rect) { | ||
| // var size = | ||
| var x = obj.x * rect.width + rect.x; | ||
| var x2 = obj.x2 * rect.width + rect.x; | ||
| var y = obj.y * rect.height + rect.y; | ||
| var y2 = obj.y2 * rect.height + rect.y; | ||
| var canvasGradient = ctx.createLinearGradient(x, y, x2, y2); | ||
| return canvasGradient; | ||
| }, | ||
| createRadialGradient: function (ctx, obj, rect) { | ||
| var width = rect.width; | ||
| var height = rect.height; | ||
| var min = Math.min(width, height); | ||
| var x = obj.x * width + rect.x; | ||
| var y = obj.y * height + rect.y; | ||
| var r = obj.r * min; | ||
| var canvasGradient = ctx.createRadialGradient(x, y, 0, x, y, r); | ||
| return canvasGradient; | ||
| }, | ||
| getGradient: function (ctx, obj, rect) { | ||
| var method = obj.type === 'radial' ? 'createRadialGradient' : 'createLinearGradient'; | ||
| var canvasGradient = this[method](ctx, obj, rect); | ||
| var colorStops = obj.colorStops; | ||
| for (var i = 0; i < colorStops.length; i++) { | ||
| canvasGradient.addColorStop( | ||
| colorStops[i].offset, colorStops[i].color | ||
| ); | ||
| } | ||
| return canvasGradient; | ||
| } | ||
@@ -204,0 +242,0 @@ }; |
@@ -6,2 +6,4 @@ /** | ||
| * TODO Wrapping | ||
| * | ||
| * Text not support gradient | ||
| */ | ||
@@ -8,0 +10,0 @@ |
@@ -36,10 +36,2 @@ 'use strict'; | ||
| // touch指尖错觉的尝试偏移量配置 | ||
| // var MOBILE_TOUCH_OFFSETS = [ | ||
| // { x: 10 }, | ||
| // { x: -20 }, | ||
| // { x: 10, y: 10 }, | ||
| // { y: -20 } | ||
| // ]; | ||
| var addEventListener = eventTool.addEventListener; | ||
@@ -130,5 +122,5 @@ var removeEventListener = eventTool.removeEventListener; | ||
| touchstart: function (event) { | ||
| // FIXME | ||
| // 移动端可能需要default行为，例如静态图表时。 | ||
| // eventTool.stop(event);// 阻止浏览器默认事件，重要 | ||
| // Default mouse behaviour should not be disabled here. | ||
| // For example, page may needs to be slided. | ||
| // eventTool.stop(event); | ||
| event = normalizeEvent(this.root, event); | ||
@@ -199,2 +191,17 @@ | ||
| var hovered = this.findHover(event.zrX, event.zrY, null); | ||
| if (name === 'mousedown') { | ||
| this._downel = hovered; | ||
| // In case click triggered before mouseup | ||
| this._upel = hovered; | ||
| } | ||
| else if (name === 'mosueup') { | ||
| this._upel = hovered; | ||
| } | ||
| else if (name === 'click') { | ||
| if (this._downel !== this._upel) { | ||
| return; | ||
| } | ||
| } | ||
| this._dispatchProxy(hovered, name, event); | ||
@@ -201,0 +208,0 @@ }; |
@@ -189,2 +189,21 @@ 'use strict'; | ||
| /** | ||
| * Get global scale | ||
| * @return {Array.<number>} | ||
| */ | ||
| transformableProto.getGlobalScale = function () { | ||
| var m = this.transform; | ||
| if (!m) { | ||
| return [1, 1]; | ||
| } | ||
| var sx = Math.sqrt(m[0] * m[0] + m[1] * m[1]); | ||
| var sy = Math.sqrt(m[2] * m[2] + m[3] * m[3]); | ||
| if (m[0] < 0) { | ||
| sx = -sx; | ||
| } | ||
| if (m[3] < 0) { | ||
| sy = -sy; | ||
| } | ||
| return [sx, sy]; | ||
| }; | ||
| /** | ||
| * 变换坐标位置到 shape 的局部坐标空间 | ||
@@ -191,0 +210,0 @@ * @method |
@@ -418,36 +418,2 @@ /** | ||
| /** | ||
| * @param {Array<number>} interval Array length === 2, | ||
| * each item is normalized value ([0, 1]). | ||
| * @param {Array.<string>} colors Color list. | ||
| * @return {Array.<Object>} colors corresponding to the interval, | ||
| * each item is {color: 'xxx', offset: ...} | ||
| * where offset is between 0 and 1. | ||
| * @memberOf module:zrender/util/color | ||
| */ | ||
| function mapIntervalToColor(interval, colors) { | ||
| if (interval.length !== 2 || interval[1] < interval[0]) { | ||
| return; | ||
| } | ||
| var info0 = mapToColor(interval[0], colors, true); | ||
| var info1 = mapToColor(interval[1], colors, true); | ||
| var result = [{color: info0.color, offset: 0}]; | ||
| var during = info1.value - info0.value; | ||
| var start = Math.max(info0.value, info0.rightIndex); | ||
| var end = Math.min(info1.value, info1.leftIndex); | ||
| for (var i = start; during > 0 && i <= end; i++) { | ||
| result.push({ | ||
| color: colors[i], | ||
| offset: (i - info0.value) / during | ||
| }); | ||
| } | ||
| result.push({color: info1.color, offset: 1}); | ||
| return result; | ||
| } | ||
| /** | ||
| * @param {string} color | ||
@@ -506,3 +472,2 @@ * @param {number=} h 0 ~ 360, ignore when null. | ||
| mapToColor: mapToColor, | ||
| mapIntervalToColor: mapIntervalToColor, | ||
| modifyHSL: modifyHSL, | ||
@@ -509,0 +474,0 @@ modifyAlpha: modifyAlpha, |
@@ -360,3 +360,3 @@ // http://www.w3.org/TR/NOTE-VML | ||
| // IE won't render arches drawn counter clockwise if x0 == x1. | ||
| if (Math.abs(x0 - x1) < 1e-10 && clockwise) { | ||
| if (Math.abs(x0 - x1) < 1e-10 && Math.abs(endAngle - startAngle) > 1e-2 && clockwise) { | ||
| // Offset x0 by 1/80 of a pixel. Use something | ||
@@ -483,2 +483,5 @@ // that can be represented in binary | ||
| } | ||
| else { | ||
| this.removeRectText(vmlRoot); | ||
| } | ||
| }; | ||
@@ -632,3 +635,3 @@ | ||
| if (! imageEl) { | ||
| if (!imageEl) { | ||
| imageEl = vmlCore.doc.createElement('div'); | ||
@@ -1009,6 +1012,6 @@ this._imageEl = imageEl; | ||
| Text.prototype.brushVML = function (root) { | ||
| Text.prototype.brushVML = function (vmlRoot) { | ||
| var style = this.style; | ||
| if (style.text) { | ||
| this.drawRectText(root, { | ||
| this.drawRectText(vmlRoot, { | ||
| x: style.x || 0, y: style.y || 0, | ||
@@ -1018,2 +1021,5 @@ width: 0, height: 0 | ||
| } | ||
| else { | ||
| this.removeRectText(vmlRoot); | ||
| } | ||
| }; | ||
@@ -1020,0 +1026,0 @@ |
@@ -31,3 +31,3 @@ /*! | ||
| */ | ||
| zrender.version = '3.0.8'; | ||
| zrender.version = '3.0.9'; | ||
@@ -269,5 +269,7 @@ /** | ||
| */ | ||
| toDataURL: function(type, backgroundColor, args) { | ||
| return this.painter.toDataURL(type, backgroundColor, args); | ||
| }, | ||
| // toDataURL: function(type, backgroundColor) { | ||
| // return this.painter.getRenderedCanvas({ | ||
| // backgroundColor: backgroundColor | ||
| // }).toDataURL(type); | ||
| // }, | ||
@@ -274,0 +276,0 @@ /** |
| { | ||
| "name": "zrender", | ||
| "version": "3.0.8", | ||
| "version": "3.0.9", | ||
| "description": "A lightweight canvas library.", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -17,2 +17,3 @@ /** | ||
| var BoundingRect = require('./BoundingRect'); | ||
| var dpr = require('../config').devicePixelRatio; | ||
@@ -39,2 +40,3 @@ var CMD = { | ||
| var mathSqrt = Math.sqrt; | ||
| var mathAbs = Math.abs; | ||
@@ -64,2 +66,6 @@ var hasTypedArray = typeof Float32Array != 'undefined'; | ||
| this._y0 = 0; | ||
| // Unit x, Unit y. Provide for avoiding drawing that too short line segment | ||
| this._ux = 0; | ||
| this._uy = 0; | ||
| }; | ||
@@ -83,2 +89,10 @@ | ||
| /** | ||
| * @readOnly | ||
| */ | ||
| setScale: function (sx, sy) { | ||
| this._ux = mathAbs(1 / dpr / sx) || 0; | ||
| this._uy = mathAbs(1 / dpr / sy) || 0; | ||
| }, | ||
| getContext: function () { | ||
@@ -137,9 +151,18 @@ return this._ctx; | ||
| lineTo: function (x, y) { | ||
| var exceedUnit = mathAbs(x - this._xi) > this._ux | ||
| || mathAbs(y - this._yi) > this._uy | ||
| // Force draw the first segment | ||
| || this._len === 0; | ||
| this.addData(CMD.L, x, y); | ||
| if (this._ctx) { | ||
| if (this._ctx && exceedUnit) { | ||
| this._needsDash() ? this._dashedLineTo(x, y) | ||
| : this._ctx.lineTo(x, y); | ||
| } | ||
| this._xi = x; | ||
| this._yi = y; | ||
| if (exceedUnit) { | ||
| this._xi = x; | ||
| this._yi = y; | ||
| } | ||
| return this; | ||
@@ -647,10 +670,37 @@ }, | ||
| var d = this.data; | ||
| for (var i = 0; i < this._len;) { | ||
| var x0, y0; | ||
| var xi, yi; | ||
| var x, y; | ||
| var ux = this._ux; | ||
| var uy = this._uy; | ||
| var len = this._len; | ||
| for (var i = 0; i < len;) { | ||
| var cmd = d[i++]; | ||
| if (i == 1) { | ||
| // 如果第一个命令是 L, C, Q | ||
| // 则 previous point 同绘制命令的第一个 point | ||
| // | ||
| // 第一个命令为 Arc 的情况下会在后面特殊处理 | ||
| xi = d[i]; | ||
| yi = d[i + 1]; | ||
| x0 = xi; | ||
| y0 = yi; | ||
| } | ||
| switch (cmd) { | ||
| case CMD.M: | ||
| ctx.moveTo(d[i++], d[i++]); | ||
| x0 = xi = d[i++]; | ||
| y0 = yi = d[i++]; | ||
| ctx.moveTo(xi, yi); | ||
| break; | ||
| case CMD.L: | ||
| ctx.lineTo(d[i++], d[i++]); | ||
| x = d[i++]; | ||
| y = d[i++]; | ||
| // Not draw too small seg between | ||
| if (mathAbs(x - xi) > ux || mathAbs(y - yi) > uy || i === len - 1) { | ||
| ctx.lineTo(x, y); | ||
| xi = x; | ||
| yi = y; | ||
| } | ||
| break; | ||
@@ -661,5 +711,9 @@ case CMD.C: | ||
| ); | ||
| xi = d[i - 2]; | ||
| yi = d[i - 1]; | ||
| break; | ||
| case CMD.Q: | ||
| ctx.quadraticCurveTo(d[i++], d[i++], d[i++], d[i++]); | ||
| xi = d[i - 2]; | ||
| yi = d[i - 1]; | ||
| break; | ||
@@ -679,2 +733,3 @@ case CMD.A: | ||
| var isEllipse = Math.abs(rx - ry) > 1e-3; | ||
| var endAngle = theta + dTheta; | ||
| if (isEllipse) { | ||
@@ -684,3 +739,3 @@ ctx.translate(cx, cy); | ||
| ctx.scale(scaleX, scaleY); | ||
| ctx.arc(0, 0, r, theta, theta + dTheta, 1 - fs); | ||
| ctx.arc(0, 0, r, theta, endAngle, 1 - fs); | ||
| ctx.scale(1 / scaleX, 1 / scaleY); | ||
@@ -691,6 +746,17 @@ ctx.rotate(-psi); | ||
| else { | ||
| ctx.arc(cx, cy, r, theta, theta + dTheta, 1 - fs); | ||
| ctx.arc(cx, cy, r, theta, endAngle, 1 - fs); | ||
| } | ||
| if (i == 1) { | ||
| // 直接使用 arc 命令 | ||
| // 第一个命令起点还未定义 | ||
| x0 = mathCos(theta) * rx + cx; | ||
| y0 = mathSin(theta) * ry + cy; | ||
| } | ||
| xi = mathCos(endAngle) * rx + cx; | ||
| yi = mathSin(endAngle) * ry + cy; | ||
| break; | ||
| case CMD.R: | ||
| x0 = xi = d[i]; | ||
| y0 = yi = d[i + 1]; | ||
| ctx.rect(d[i++], d[i++], d[i++], d[i++]); | ||
@@ -700,2 +766,4 @@ break; | ||
| ctx.closePath(); | ||
| xi = x0; | ||
| yi = y0; | ||
| } | ||
@@ -702,0 +770,0 @@ } |
@@ -11,3 +11,3 @@ // CompoundPath to improve performance | ||
| paths: [] | ||
| paths: null | ||
| }, | ||
@@ -28,6 +28,12 @@ | ||
| this._updatePathDirty(); | ||
| var paths = this.shape.paths || []; | ||
| var scale = this.getGlobalScale(); | ||
| // Update path scale | ||
| for (var i = 0; i < paths.length; i++) { | ||
| paths[i].path.setScale(scale[0], scale[1]); | ||
| } | ||
| }, | ||
| buildPath: function (ctx, shape) { | ||
| var paths = shape.paths; | ||
| var paths = shape.paths || []; | ||
| for (var i = 0; i < paths.length; i++) { | ||
@@ -47,5 +53,5 @@ paths[i].buildPath(ctx, paths[i].shape); | ||
| this._updatePathDirty(); | ||
| return Path.getBoundingRect.call(this); | ||
| return Path.prototype.getBoundingRect.call(this); | ||
| } | ||
| }); | ||
| }); |
@@ -243,2 +243,12 @@ /** | ||
| return this; | ||
| }, | ||
| /** | ||
| * Use given style object | ||
| * @param {Object} obj | ||
| */ | ||
| useStyle: function (obj) { | ||
| this.style = new Style(obj); | ||
| this.dirty(false); | ||
| return this; | ||
| } | ||
@@ -245,0 +255,0 @@ }; |
@@ -32,24 +32,3 @@ define(function(require) { | ||
| type: 'linear', | ||
| updateCanvasGradient: function (shape, ctx) { | ||
| var rect = shape.getBoundingRect(); | ||
| // var size = | ||
| var x = this.x * rect.width + rect.x; | ||
| var x2 = this.x2 * rect.width + rect.x; | ||
| var y = this.y * rect.height + rect.y; | ||
| var y2 = this.y2 * rect.height + rect.y; | ||
| var canvasGradient = ctx.createLinearGradient(x, y, x2, y2); | ||
| var colorStops = this.colorStops; | ||
| for (var i = 0; i < colorStops.length; i++) { | ||
| canvasGradient.addColorStop( | ||
| colorStops[i].offset, colorStops[i].color | ||
| ); | ||
| } | ||
| this.canvasGradient = canvasGradient; | ||
| } | ||
| type: 'linear' | ||
| }; | ||
@@ -56,0 +35,0 @@ |
@@ -60,16 +60,26 @@ /** | ||
| var hasFill = pathHasFill(style); | ||
| var hasFillGradient = hasFill && !!(style.fill.colorStops); | ||
| var hasStrokeGradient = hasStroke && !!(style.stroke.colorStops); | ||
| style.bind(ctx, this); | ||
| this.setTransform(ctx); | ||
| if (this.__dirtyPath) { | ||
| var rect = this.getBoundingRect(); | ||
| // Update gradient because bounding rect may changed | ||
| if (hasFill && (style.fill instanceof Gradient)) { | ||
| style.fill.updateCanvasGradient(this, ctx); | ||
| if (hasFillGradient) { | ||
| this._fillGradient = style.getGradient(ctx, style.fill, rect); | ||
| } | ||
| if (hasStroke && (style.stroke instanceof Gradient)) { | ||
| style.stroke.updateCanvasGradient(this, ctx); | ||
| if (hasStrokeGradient) { | ||
| this._strokeGradient = style.getGradient(ctx, style.stroke, rect); | ||
| } | ||
| } | ||
| // Use the gradient | ||
| if (hasFillGradient) { | ||
| ctx.fillStyle = this._fillGradient; | ||
| } | ||
| if (hasStrokeGradient) { | ||
| ctx.strokeStyle = this._strokeGradient; | ||
| } | ||
| style.bind(ctx, this); | ||
| this.setTransform(ctx); | ||
| var lineDash = style.lineDash; | ||
@@ -80,2 +90,6 @@ var lineDashOffset = style.lineDashOffset; | ||
| // Update path sx, sy | ||
| var scale = this.getGlobalScale(); | ||
| path.setScale(scale[0], scale[1]); | ||
| // Proxy context | ||
@@ -146,6 +160,4 @@ // Rebuild path in following 2 cases | ||
| // 2. Shape is changed | ||
| var rectWithStroke = this._rectWithStroke; | ||
| var rectWithStroke = this._rectWithStroke || (this._rectWithStroke = rect.clone()); | ||
| if (this.__dirty || needsUpdateRect) { | ||
| var rectWithStroke = this._rectWithStroke | ||
| || (this._rectWithStroke = rect.clone()); | ||
| rectWithStroke.copy(rect); | ||
@@ -152,0 +164,0 @@ // FIXME Must after updateTransform |
@@ -29,27 +29,3 @@ define(function(require) { | ||
| type: 'radial', | ||
| updateCanvasGradient: function (shape, ctx) { | ||
| var rect = shape.getBoundingRect(); | ||
| var width = rect.width; | ||
| var height = rect.height; | ||
| var min = Math.min(width, height); | ||
| // var max = Math.max(width, height); | ||
| var x = this.x * width + rect.x; | ||
| var y = this.y * height + rect.y; | ||
| var r = this.r * min; | ||
| var canvasGradient = ctx.createRadialGradient(x, y, 0, x, y, r); | ||
| var colorStops = this.colorStops; | ||
| for (var i = 0; i < colorStops.length; i++) { | ||
| canvasGradient.addColorStop( | ||
| colorStops[i].offset, colorStops[i].color | ||
| ); | ||
| } | ||
| this.canvasGradient = canvasGradient; | ||
| } | ||
| type: 'radial' | ||
| }; | ||
@@ -56,0 +32,0 @@ |
@@ -9,2 +9,3 @@ /** | ||
| var curveTool = require('../../core/curve'); | ||
| var vec2 = require('../../core/vector'); | ||
| var quadraticSubdivide = curveTool.quadraticSubdivide; | ||
@@ -14,4 +15,23 @@ var cubicSubdivide = curveTool.cubicSubdivide; | ||
| var cubicAt = curveTool.cubicAt; | ||
| var quadraticDerivativeAt = curveTool.quadraticDerivativeAt; | ||
| var cubicDerivativeAt = curveTool.cubicDerivativeAt; | ||
| var out = []; | ||
| function someVectorAt(shape, t, isTangent) { | ||
| var cpx2 = shape.cpx2; | ||
| var cpy2 = shape.cpy2; | ||
| if (cpx2 === null || cpy2 === null) { | ||
| return [ | ||
| (isTangent ? cubicDerivativeAt : cubicAt)(shape.x1, shape.cpx1, shape.cpx2, shape.x2, t), | ||
| (isTangent ? cubicDerivativeAt : cubicAt)(shape.y1, shape.cpy1, shape.cpy2, shape.y2, t) | ||
| ]; | ||
| } | ||
| else { | ||
| return [ | ||
| (isTangent ? quadraticDerivativeAt : quadraticAt)(shape.x1, shape.cpx1, shape.x2, t), | ||
| (isTangent ? quadraticDerivativeAt : quadraticAt)(shape.y1, shape.cpy1, shape.y2, t) | ||
| ]; | ||
| } | ||
| } | ||
| return require('../Path').extend({ | ||
@@ -100,23 +120,19 @@ | ||
| * Get point at percent | ||
| * @param {number} percent | ||
| * @param {number} t | ||
| * @return {Array.<number>} | ||
| */ | ||
| pointAt: function (p) { | ||
| var shape = this.shape; | ||
| var cpx2 = shape.cpx2; | ||
| var cpy2 = shape.cpy2; | ||
| if (cpx2 === null || cpy2 === null) { | ||
| return [ | ||
| quadraticAt(shape.x1, shape.cpx1, shape.x2, p), | ||
| quadraticAt(shape.y1, shape.cpy1, shape.y2, p) | ||
| ]; | ||
| } | ||
| else { | ||
| return [ | ||
| cubicAt(shape.x1, shape.cpx1, shape.cpx1, shape.x2, p), | ||
| cubicAt(shape.y1, shape.cpy1, shape.cpy1, shape.y2, p) | ||
| ]; | ||
| } | ||
| pointAt: function (t) { | ||
| return someVectorAt(this.shape, t, false); | ||
| }, | ||
| /** | ||
| * Get tangent at percent | ||
| * @param {number} t | ||
| * @return {Array.<number>} | ||
| */ | ||
| tangentAt: function (t) { | ||
| var p = someVectorAt(this.shape, t, true); | ||
| return vec2.normalize(p, p); | ||
| } | ||
| }); | ||
| }); |
@@ -150,9 +150,9 @@ /** | ||
| } | ||
| if (fill != null) { | ||
| // Use canvas gradient if has | ||
| ctx.fillStyle = fill.canvasGradient ? fill.canvasGradient : fill; | ||
| // Gradient will be created and set in Path#brush. So ignore it here | ||
| if (fill != null && fill !== 'none' && !fill.colorStops) { | ||
| ctx.fillStyle = fill; | ||
| } | ||
| if (stroke != null) { | ||
| if (stroke != null && stroke !== 'none' && !stroke.colorStops) { | ||
| // Use canvas gradient if has | ||
| ctx.strokeStyle = stroke.canvasGradient ? stroke.canvasGradient : stroke; | ||
| ctx.strokeStyle = stroke; | ||
| } | ||
@@ -202,2 +202,40 @@ this.opacity != null && (ctx.globalAlpha = this.opacity); | ||
| return newStyle; | ||
| }, | ||
| createLinearGradient: function (ctx, obj, rect) { | ||
| // var size = | ||
| var x = obj.x * rect.width + rect.x; | ||
| var x2 = obj.x2 * rect.width + rect.x; | ||
| var y = obj.y * rect.height + rect.y; | ||
| var y2 = obj.y2 * rect.height + rect.y; | ||
| var canvasGradient = ctx.createLinearGradient(x, y, x2, y2); | ||
| return canvasGradient; | ||
| }, | ||
| createRadialGradient: function (ctx, obj, rect) { | ||
| var width = rect.width; | ||
| var height = rect.height; | ||
| var min = Math.min(width, height); | ||
| var x = obj.x * width + rect.x; | ||
| var y = obj.y * height + rect.y; | ||
| var r = obj.r * min; | ||
| var canvasGradient = ctx.createRadialGradient(x, y, 0, x, y, r); | ||
| return canvasGradient; | ||
| }, | ||
| getGradient: function (ctx, obj, rect) { | ||
| var method = obj.type === 'radial' ? 'createRadialGradient' : 'createLinearGradient'; | ||
| var canvasGradient = this[method](ctx, obj, rect); | ||
| var colorStops = obj.colorStops; | ||
| for (var i = 0; i < colorStops.length; i++) { | ||
| canvasGradient.addColorStop( | ||
| colorStops[i].offset, colorStops[i].color | ||
| ); | ||
| } | ||
| return canvasGradient; | ||
| } | ||
@@ -204,0 +242,0 @@ }; |
@@ -6,2 +6,4 @@ /** | ||
| * TODO Wrapping | ||
| * | ||
| * Text not support gradient | ||
| */ | ||
@@ -8,0 +10,0 @@ |
@@ -37,10 +37,2 @@ /** | ||
| // touch指尖错觉的尝试偏移量配置 | ||
| // var MOBILE_TOUCH_OFFSETS = [ | ||
| // { x: 10 }, | ||
| // { x: -20 }, | ||
| // { x: 10, y: 10 }, | ||
| // { y: -20 } | ||
| // ]; | ||
| var addEventListener = eventTool.addEventListener; | ||
@@ -131,5 +123,5 @@ var removeEventListener = eventTool.removeEventListener; | ||
| touchstart: function (event) { | ||
| // FIXME | ||
| // 移动端可能需要default行为，例如静态图表时。 | ||
| // eventTool.stop(event);// 阻止浏览器默认事件，重要 | ||
| // Default mouse behaviour should not be disabled here. | ||
| // For example, page may needs to be slided. | ||
| // eventTool.stop(event); | ||
| event = normalizeEvent(this.root, event); | ||
@@ -200,2 +192,17 @@ | ||
| var hovered = this.findHover(event.zrX, event.zrY, null); | ||
| if (name === 'mousedown') { | ||
| this._downel = hovered; | ||
| // In case click triggered before mouseup | ||
| this._upel = hovered; | ||
| } | ||
| else if (name === 'mosueup') { | ||
| this._upel = hovered; | ||
| } | ||
| else if (name === 'click') { | ||
| if (this._downel !== this._upel) { | ||
| return; | ||
| } | ||
| } | ||
| this._dispatchProxy(hovered, name, event); | ||
@@ -202,0 +209,0 @@ }; |
@@ -190,2 +190,21 @@ /** | ||
| /** | ||
| * Get global scale | ||
| * @return {Array.<number>} | ||
| */ | ||
| transformableProto.getGlobalScale = function () { | ||
| var m = this.transform; | ||
| if (!m) { | ||
| return [1, 1]; | ||
| } | ||
| var sx = Math.sqrt(m[0] * m[0] + m[1] * m[1]); | ||
| var sy = Math.sqrt(m[2] * m[2] + m[3] * m[3]); | ||
| if (m[0] < 0) { | ||
| sx = -sx; | ||
| } | ||
| if (m[3] < 0) { | ||
| sy = -sy; | ||
| } | ||
| return [sx, sy]; | ||
| }; | ||
| /** | ||
| * 变换坐标位置到 shape 的局部坐标空间 | ||
@@ -192,0 +211,0 @@ * @method |
@@ -418,36 +418,2 @@ /** | ||
| /** | ||
| * @param {Array<number>} interval Array length === 2, | ||
| * each item is normalized value ([0, 1]). | ||
| * @param {Array.<string>} colors Color list. | ||
| * @return {Array.<Object>} colors corresponding to the interval, | ||
| * each item is {color: 'xxx', offset: ...} | ||
| * where offset is between 0 and 1. | ||
| * @memberOf module:zrender/util/color | ||
| */ | ||
| function mapIntervalToColor(interval, colors) { | ||
| if (interval.length !== 2 || interval[1] < interval[0]) { | ||
| return; | ||
| } | ||
| var info0 = mapToColor(interval[0], colors, true); | ||
| var info1 = mapToColor(interval[1], colors, true); | ||
| var result = [{color: info0.color, offset: 0}]; | ||
| var during = info1.value - info0.value; | ||
| var start = Math.max(info0.value, info0.rightIndex); | ||
| var end = Math.min(info1.value, info1.leftIndex); | ||
| for (var i = start; during > 0 && i <= end; i++) { | ||
| result.push({ | ||
| color: colors[i], | ||
| offset: (i - info0.value) / during | ||
| }); | ||
| } | ||
| result.push({color: info1.color, offset: 1}); | ||
| return result; | ||
| } | ||
| /** | ||
| * @param {string} color | ||
@@ -506,3 +472,2 @@ * @param {number=} h 0 ~ 360, ignore when null. | ||
| mapToColor: mapToColor, | ||
| mapIntervalToColor: mapIntervalToColor, | ||
| modifyHSL: modifyHSL, | ||
@@ -509,0 +474,0 @@ modifyAlpha: modifyAlpha, |
@@ -360,3 +360,3 @@ // http://www.w3.org/TR/NOTE-VML | ||
| // IE won't render arches drawn counter clockwise if x0 == x1. | ||
| if (Math.abs(x0 - x1) < 1e-10 && clockwise) { | ||
| if (Math.abs(x0 - x1) < 1e-10 && Math.abs(endAngle - startAngle) > 1e-2 && clockwise) { | ||
| // Offset x0 by 1/80 of a pixel. Use something | ||
@@ -483,2 +483,5 @@ // that can be represented in binary | ||
| } | ||
| else { | ||
| this.removeRectText(vmlRoot); | ||
| } | ||
| }; | ||
@@ -632,3 +635,3 @@ | ||
| if (! imageEl) { | ||
| if (!imageEl) { | ||
| imageEl = vmlCore.doc.createElement('div'); | ||
@@ -1009,6 +1012,6 @@ this._imageEl = imageEl; | ||
| Text.prototype.brushVML = function (root) { | ||
| Text.prototype.brushVML = function (vmlRoot) { | ||
| var style = this.style; | ||
| if (style.text) { | ||
| this.drawRectText(root, { | ||
| this.drawRectText(vmlRoot, { | ||
| x: style.x || 0, y: style.y || 0, | ||
@@ -1018,2 +1021,5 @@ width: 0, height: 0 | ||
| } | ||
| else { | ||
| this.removeRectText(vmlRoot); | ||
| } | ||
| }; | ||
@@ -1020,0 +1026,0 @@ |
@@ -31,3 +31,3 @@ /*! | ||
| */ | ||
| zrender.version = '3.0.8'; | ||
| zrender.version = '3.0.9'; | ||
@@ -269,5 +269,7 @@ /** | ||
| */ | ||
| toDataURL: function(type, backgroundColor, args) { | ||
| return this.painter.toDataURL(type, backgroundColor, args); | ||
| }, | ||
| // toDataURL: function(type, backgroundColor) { | ||
| // return this.painter.getRenderedCanvas({ | ||
| // backgroundColor: backgroundColor | ||
| // }).toDataURL(type); | ||
| // }, | ||
@@ -274,0 +276,0 @@ /** |
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
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
- Total package byte prevSize
- increased by0.81%
881712
- Lines of code
- increased by0.8%
25851
No dependency changes