var matrix = require("../core/matrix"); var vector = require("../core/vector"); /** * 提供变换扩展 * @module zrender/mixin/Transformable * @author pissang (https://www.github.com/pissang) */ var mIdentity = matrix.identity; var EPSILON = 5e-5; function isNotAroundZero(val) { return val > EPSILON || val < -EPSILON; } /** * @alias module:zrender/mixin/Transformable * @constructor */ var Transformable = function (opts) { opts = opts || {}; // If there are no given position, rotation, scale if (!opts.position) { /** * 平移 * @type {Array.} * @default [0, 0] */ this.position = [0, 0]; } if (opts.rotation == null) { /** * 旋转 * @type {Array.} * @default 0 */ this.rotation = 0; } if (!opts.scale) { /** * 缩放 * @type {Array.} * @default [1, 1] */ this.scale = [1, 1]; } /** * 旋转和缩放的原点 * @type {Array.} * @default null */ this.origin = this.origin || null; }; var transformableProto = Transformable.prototype; transformableProto.transform = null; /** * 判断是否需要有坐标变换 * 如果有坐标变换, 则从position, rotation, scale以及父节点的transform计算出自身的transform矩阵 */ transformableProto.needLocalTransform = function () { return isNotAroundZero(this.rotation) || isNotAroundZero(this.position[0]) || isNotAroundZero(this.position[1]) || isNotAroundZero(this.scale[0] - 1) || isNotAroundZero(this.scale[1] - 1); }; var scaleTmp = []; transformableProto.updateTransform = function () { var parent = this.parent; var parentHasTransform = parent && parent.transform; var needLocalTransform = this.needLocalTransform(); var m = this.transform; if (!(needLocalTransform || parentHasTransform)) { m && mIdentity(m); return; } m = m || matrix.create(); if (needLocalTransform) { this.getLocalTransform(m); } else { mIdentity(m); } // 应用父节点变换 if (parentHasTransform) { if (needLocalTransform) { matrix.mul(m, parent.transform, m); } else { matrix.copy(m, parent.transform); } } // 保存这个变换矩阵 this.transform = m; var globalScaleRatio = this.globalScaleRatio; if (globalScaleRatio != null && globalScaleRatio !== 1) { this.getGlobalScale(scaleTmp); var relX = scaleTmp[0] < 0 ? -1 : 1; var relY = scaleTmp[1] < 0 ? -1 : 1; var sx = ((scaleTmp[0] - relX) * globalScaleRatio + relX) / scaleTmp[0] || 0; var sy = ((scaleTmp[1] - relY) * globalScaleRatio + relY) / scaleTmp[1] || 0; m[0] *= sx; m[1] *= sx; m[2] *= sy; m[3] *= sy; } this.invTransform = this.invTransform || matrix.create(); matrix.invert(this.invTransform, m); }; transformableProto.getLocalTransform = function (m) { return Transformable.getLocalTransform(this, m); }; /** * 将自己的transform应用到context上 * @param {CanvasRenderingContext2D} ctx */ transformableProto.setTransform = function (ctx) { var m = this.transform; var dpr = ctx.dpr || 1; if (m) { ctx.setTransform(dpr * m[0], dpr * m[1], dpr * m[2], dpr * m[3], dpr * m[4], dpr * m[5]); } else { ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } }; transformableProto.restoreTransform = function (ctx) { var dpr = ctx.dpr || 1; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); }; var tmpTransform = []; var originTransform = matrix.create(); transformableProto.setLocalTransform = function (m) { if (!m) { // TODO return or set identity? return; } var sx = m[0] * m[0] + m[1] * m[1]; var sy = m[2] * m[2] + m[3] * m[3]; var position = this.position; var scale = this.scale; if (isNotAroundZero(sx - 1)) { sx = Math.sqrt(sx); } if (isNotAroundZero(sy - 1)) { sy = Math.sqrt(sy); } if (m[0] < 0) { sx = -sx; } if (m[3] < 0) { sy = -sy; } position[0] = m[4]; position[1] = m[5]; scale[0] = sx; scale[1] = sy; this.rotation = Math.atan2(-m[1] / sy, m[0] / sx); }; /** * 分解`transform`矩阵到`position`, `rotation`, `scale` */ transformableProto.decomposeTransform = function () { if (!this.transform) { return; } var parent = this.parent; var m = this.transform; if (parent && parent.transform) { // Get local transform and decompose them to position, scale, rotation matrix.mul(tmpTransform, parent.invTransform, m); m = tmpTransform; } var origin = this.origin; if (origin && (origin[0] || origin[1])) { originTransform[4] = origin[0]; originTransform[5] = origin[1]; matrix.mul(tmpTransform, m, originTransform); tmpTransform[4] -= origin[0]; tmpTransform[5] -= origin[1]; m = tmpTransform; } this.setLocalTransform(m); }; /** * Get global scale * @return {Array.} */ transformableProto.getGlobalScale = function (out) { var m = this.transform; out = out || []; if (!m) { out[0] = 1; out[1] = 1; return out; } out[0] = Math.sqrt(m[0] * m[0] + m[1] * m[1]); out[1] = Math.sqrt(m[2] * m[2] + m[3] * m[3]); if (m[0] < 0) { out[0] = -out[0]; } if (m[3] < 0) { out[1] = -out[1]; } return out; }; /** * 变换坐标位置到 shape 的局部坐标空间 * @method * @param {number} x * @param {number} y * @return {Array.} */ transformableProto.transformCoordToLocal = function (x, y) { var v2 = [x, y]; var invTransform = this.invTransform; if (invTransform) { vector.applyTransform(v2, v2, invTransform); } return v2; }; /** * 变换局部坐标位置到全局坐标空间 * @method * @param {number} x * @param {number} y * @return {Array.} */ transformableProto.transformCoordToGlobal = function (x, y) { var v2 = [x, y]; var transform = this.transform; if (transform) { vector.applyTransform(v2, v2, transform); } return v2; }; /** * @static * @param {Object} target * @param {Array.} target.origin * @param {number} target.rotation * @param {Array.} target.position * @param {Array.} [m] */ Transformable.getLocalTransform = function (target, m) { m = m || []; mIdentity(m); var origin = target.origin; var scale = target.scale || [1, 1]; var rotation = target.rotation || 0; var position = target.position || [0, 0]; if (origin) { // Translate to origin m[4] -= origin[0]; m[5] -= origin[1]; } matrix.scale(m, m, scale); if (rotation) { matrix.rotate(m, m, rotation); } if (origin) { // Translate back from origin m[4] += origin[0]; m[5] += origin[1]; } m[4] += position[0]; m[5] += position[1]; return m; }; var _default = Transformable; module.exports = _default;