1014 lines
29 KiB
JavaScript
1014 lines
29 KiB
JavaScript
var env = require("../core/env");
|
||
|
||
var _vector = require("../core/vector");
|
||
|
||
var applyTransform = _vector.applyTransform;
|
||
|
||
var BoundingRect = require("../core/BoundingRect");
|
||
|
||
var colorTool = require("../tool/color");
|
||
|
||
var textContain = require("../contain/text");
|
||
|
||
var textHelper = require("../graphic/helper/text");
|
||
|
||
var RectText = require("../graphic/mixin/RectText");
|
||
|
||
var Displayable = require("../graphic/Displayable");
|
||
|
||
var ZImage = require("../graphic/Image");
|
||
|
||
var Text = require("../graphic/Text");
|
||
|
||
var Path = require("../graphic/Path");
|
||
|
||
var PathProxy = require("../core/PathProxy");
|
||
|
||
var Gradient = require("../graphic/Gradient");
|
||
|
||
var vmlCore = require("./core");
|
||
|
||
// http://www.w3.org/TR/NOTE-VML
|
||
// TODO Use proxy like svg instead of overwrite brush methods
|
||
var CMD = PathProxy.CMD;
|
||
var round = Math.round;
|
||
var sqrt = Math.sqrt;
|
||
var abs = Math.abs;
|
||
var cos = Math.cos;
|
||
var sin = Math.sin;
|
||
var mathMax = Math.max;
|
||
|
||
if (!env.canvasSupported) {
|
||
var comma = ',';
|
||
var imageTransformPrefix = 'progid:DXImageTransform.Microsoft';
|
||
var Z = 21600;
|
||
var Z2 = Z / 2;
|
||
var ZLEVEL_BASE = 100000;
|
||
var Z_BASE = 1000;
|
||
|
||
var initRootElStyle = function (el) {
|
||
el.style.cssText = 'position:absolute;left:0;top:0;width:1px;height:1px;';
|
||
el.coordsize = Z + ',' + Z;
|
||
el.coordorigin = '0,0';
|
||
};
|
||
|
||
var encodeHtmlAttribute = function (s) {
|
||
return String(s).replace(/&/g, '&').replace(/"/g, '"');
|
||
};
|
||
|
||
var rgb2Str = function (r, g, b) {
|
||
return 'rgb(' + [r, g, b].join(',') + ')';
|
||
};
|
||
|
||
var append = function (parent, child) {
|
||
if (child && parent && child.parentNode !== parent) {
|
||
parent.appendChild(child);
|
||
}
|
||
};
|
||
|
||
var remove = function (parent, child) {
|
||
if (child && parent && child.parentNode === parent) {
|
||
parent.removeChild(child);
|
||
}
|
||
};
|
||
|
||
var getZIndex = function (zlevel, z, z2) {
|
||
// z 的取值范围为 [0, 1000]
|
||
return (parseFloat(zlevel) || 0) * ZLEVEL_BASE + (parseFloat(z) || 0) * Z_BASE + z2;
|
||
};
|
||
|
||
var parsePercent = function (value, maxValue) {
|
||
if (typeof value === 'string') {
|
||
if (value.lastIndexOf('%') >= 0) {
|
||
return parseFloat(value) / 100 * maxValue;
|
||
}
|
||
|
||
return parseFloat(value);
|
||
}
|
||
|
||
return value;
|
||
};
|
||
/***************************************************
|
||
* PATH
|
||
**************************************************/
|
||
|
||
|
||
var setColorAndOpacity = function (el, color, opacity) {
|
||
var colorArr = colorTool.parse(color);
|
||
opacity = +opacity;
|
||
|
||
if (isNaN(opacity)) {
|
||
opacity = 1;
|
||
}
|
||
|
||
if (colorArr) {
|
||
el.color = rgb2Str(colorArr[0], colorArr[1], colorArr[2]);
|
||
el.opacity = opacity * colorArr[3];
|
||
}
|
||
};
|
||
|
||
var getColorAndAlpha = function (color) {
|
||
var colorArr = colorTool.parse(color);
|
||
return [rgb2Str(colorArr[0], colorArr[1], colorArr[2]), colorArr[3]];
|
||
};
|
||
|
||
var updateFillNode = function (el, style, zrEl) {
|
||
// TODO pattern
|
||
var fill = style.fill;
|
||
|
||
if (fill != null) {
|
||
// Modified from excanvas
|
||
if (fill instanceof Gradient) {
|
||
var gradientType;
|
||
var angle = 0;
|
||
var focus = [0, 0]; // additional offset
|
||
|
||
var shift = 0; // scale factor for offset
|
||
|
||
var expansion = 1;
|
||
var rect = zrEl.getBoundingRect();
|
||
var rectWidth = rect.width;
|
||
var rectHeight = rect.height;
|
||
|
||
if (fill.type === 'linear') {
|
||
gradientType = 'gradient';
|
||
var transform = zrEl.transform;
|
||
var p0 = [fill.x * rectWidth, fill.y * rectHeight];
|
||
var p1 = [fill.x2 * rectWidth, fill.y2 * rectHeight];
|
||
|
||
if (transform) {
|
||
applyTransform(p0, p0, transform);
|
||
applyTransform(p1, p1, transform);
|
||
}
|
||
|
||
var dx = p1[0] - p0[0];
|
||
var dy = p1[1] - p0[1];
|
||
angle = Math.atan2(dx, dy) * 180 / Math.PI; // The angle should be a non-negative number.
|
||
|
||
if (angle < 0) {
|
||
angle += 360;
|
||
} // Very small angles produce an unexpected result because they are
|
||
// converted to a scientific notation string.
|
||
|
||
|
||
if (angle < 1e-6) {
|
||
angle = 0;
|
||
}
|
||
} else {
|
||
gradientType = 'gradientradial';
|
||
var p0 = [fill.x * rectWidth, fill.y * rectHeight];
|
||
var transform = zrEl.transform;
|
||
var scale = zrEl.scale;
|
||
var width = rectWidth;
|
||
var height = rectHeight;
|
||
focus = [// Percent in bounding rect
|
||
(p0[0] - rect.x) / width, (p0[1] - rect.y) / height];
|
||
|
||
if (transform) {
|
||
applyTransform(p0, p0, transform);
|
||
}
|
||
|
||
width /= scale[0] * Z;
|
||
height /= scale[1] * Z;
|
||
var dimension = mathMax(width, height);
|
||
shift = 2 * 0 / dimension;
|
||
expansion = 2 * fill.r / dimension - shift;
|
||
} // We need to sort the color stops in ascending order by offset,
|
||
// otherwise IE won't interpret it correctly.
|
||
|
||
|
||
var stops = fill.colorStops.slice();
|
||
stops.sort(function (cs1, cs2) {
|
||
return cs1.offset - cs2.offset;
|
||
});
|
||
var length = stops.length; // Color and alpha list of first and last stop
|
||
|
||
var colorAndAlphaList = [];
|
||
var colors = [];
|
||
|
||
for (var i = 0; i < length; i++) {
|
||
var stop = stops[i];
|
||
var colorAndAlpha = getColorAndAlpha(stop.color);
|
||
colors.push(stop.offset * expansion + shift + ' ' + colorAndAlpha[0]);
|
||
|
||
if (i === 0 || i === length - 1) {
|
||
colorAndAlphaList.push(colorAndAlpha);
|
||
}
|
||
}
|
||
|
||
if (length >= 2) {
|
||
var color1 = colorAndAlphaList[0][0];
|
||
var color2 = colorAndAlphaList[1][0];
|
||
var opacity1 = colorAndAlphaList[0][1] * style.opacity;
|
||
var opacity2 = colorAndAlphaList[1][1] * style.opacity;
|
||
el.type = gradientType;
|
||
el.method = 'none';
|
||
el.focus = '100%';
|
||
el.angle = angle;
|
||
el.color = color1;
|
||
el.color2 = color2;
|
||
el.colors = colors.join(','); // When colors attribute is used, the meanings of opacity and o:opacity2
|
||
// are reversed.
|
||
|
||
el.opacity = opacity2; // FIXME g_o_:opacity ?
|
||
|
||
el.opacity2 = opacity1;
|
||
}
|
||
|
||
if (gradientType === 'radial') {
|
||
el.focusposition = focus.join(',');
|
||
}
|
||
} else {
|
||
// FIXME Change from Gradient fill to color fill
|
||
setColorAndOpacity(el, fill, style.opacity);
|
||
}
|
||
}
|
||
};
|
||
|
||
var updateStrokeNode = function (el, style) {
|
||
// if (style.lineJoin != null) {
|
||
// el.joinstyle = style.lineJoin;
|
||
// }
|
||
// if (style.miterLimit != null) {
|
||
// el.miterlimit = style.miterLimit * Z;
|
||
// }
|
||
// if (style.lineCap != null) {
|
||
// el.endcap = style.lineCap;
|
||
// }
|
||
if (style.lineDash != null) {
|
||
el.dashstyle = style.lineDash.join(' ');
|
||
}
|
||
|
||
if (style.stroke != null && !(style.stroke instanceof Gradient)) {
|
||
setColorAndOpacity(el, style.stroke, style.opacity);
|
||
}
|
||
};
|
||
|
||
var updateFillAndStroke = function (vmlEl, type, style, zrEl) {
|
||
var isFill = type === 'fill';
|
||
var el = vmlEl.getElementsByTagName(type)[0]; // Stroke must have lineWidth
|
||
|
||
if (style[type] != null && style[type] !== 'none' && (isFill || !isFill && style.lineWidth)) {
|
||
vmlEl[isFill ? 'filled' : 'stroked'] = 'true'; // FIXME Remove before updating, or set `colors` will throw error
|
||
|
||
if (style[type] instanceof Gradient) {
|
||
remove(vmlEl, el);
|
||
}
|
||
|
||
if (!el) {
|
||
el = vmlCore.createNode(type);
|
||
}
|
||
|
||
isFill ? updateFillNode(el, style, zrEl) : updateStrokeNode(el, style);
|
||
append(vmlEl, el);
|
||
} else {
|
||
vmlEl[isFill ? 'filled' : 'stroked'] = 'false';
|
||
remove(vmlEl, el);
|
||
}
|
||
};
|
||
|
||
var points = [[], [], []];
|
||
|
||
var pathDataToString = function (path, m) {
|
||
var M = CMD.M;
|
||
var C = CMD.C;
|
||
var L = CMD.L;
|
||
var A = CMD.A;
|
||
var Q = CMD.Q;
|
||
var str = [];
|
||
var nPoint;
|
||
var cmdStr;
|
||
var cmd;
|
||
var i;
|
||
var xi;
|
||
var yi;
|
||
var data = path.data;
|
||
var dataLength = path.len();
|
||
|
||
for (i = 0; i < dataLength;) {
|
||
cmd = data[i++];
|
||
cmdStr = '';
|
||
nPoint = 0;
|
||
|
||
switch (cmd) {
|
||
case M:
|
||
cmdStr = ' m ';
|
||
nPoint = 1;
|
||
xi = data[i++];
|
||
yi = data[i++];
|
||
points[0][0] = xi;
|
||
points[0][1] = yi;
|
||
break;
|
||
|
||
case L:
|
||
cmdStr = ' l ';
|
||
nPoint = 1;
|
||
xi = data[i++];
|
||
yi = data[i++];
|
||
points[0][0] = xi;
|
||
points[0][1] = yi;
|
||
break;
|
||
|
||
case Q:
|
||
case C:
|
||
cmdStr = ' c ';
|
||
nPoint = 3;
|
||
var x1 = data[i++];
|
||
var y1 = data[i++];
|
||
var x2 = data[i++];
|
||
var y2 = data[i++];
|
||
var x3;
|
||
var y3;
|
||
|
||
if (cmd === Q) {
|
||
// Convert quadratic to cubic using degree elevation
|
||
x3 = x2;
|
||
y3 = y2;
|
||
x2 = (x2 + 2 * x1) / 3;
|
||
y2 = (y2 + 2 * y1) / 3;
|
||
x1 = (xi + 2 * x1) / 3;
|
||
y1 = (yi + 2 * y1) / 3;
|
||
} else {
|
||
x3 = data[i++];
|
||
y3 = data[i++];
|
||
}
|
||
|
||
points[0][0] = x1;
|
||
points[0][1] = y1;
|
||
points[1][0] = x2;
|
||
points[1][1] = y2;
|
||
points[2][0] = x3;
|
||
points[2][1] = y3;
|
||
xi = x3;
|
||
yi = y3;
|
||
break;
|
||
|
||
case A:
|
||
var x = 0;
|
||
var y = 0;
|
||
var sx = 1;
|
||
var sy = 1;
|
||
var angle = 0;
|
||
|
||
if (m) {
|
||
// Extract SRT from matrix
|
||
x = m[4];
|
||
y = m[5];
|
||
sx = sqrt(m[0] * m[0] + m[1] * m[1]);
|
||
sy = sqrt(m[2] * m[2] + m[3] * m[3]);
|
||
angle = Math.atan2(-m[1] / sy, m[0] / sx);
|
||
}
|
||
|
||
var cx = data[i++];
|
||
var cy = data[i++];
|
||
var rx = data[i++];
|
||
var ry = data[i++];
|
||
var startAngle = data[i++] + angle;
|
||
var endAngle = data[i++] + startAngle + angle; // FIXME
|
||
// var psi = data[i++];
|
||
|
||
i++;
|
||
var clockwise = data[i++];
|
||
var x0 = cx + cos(startAngle) * rx;
|
||
var y0 = cy + sin(startAngle) * ry;
|
||
var x1 = cx + cos(endAngle) * rx;
|
||
var y1 = cy + sin(endAngle) * ry;
|
||
var type = clockwise ? ' wa ' : ' at ';
|
||
|
||
if (Math.abs(x0 - x1) < 1e-4) {
|
||
// IE won't render arches drawn counter clockwise if x0 == x1.
|
||
if (Math.abs(endAngle - startAngle) > 1e-2) {
|
||
// Offset x0 by 1/80 of a pixel. Use something
|
||
// that can be represented in binary
|
||
if (clockwise) {
|
||
x0 += 270 / Z;
|
||
}
|
||
} else {
|
||
// Avoid case draw full circle
|
||
if (Math.abs(y0 - cy) < 1e-4) {
|
||
if (clockwise && x0 < cx || !clockwise && x0 > cx) {
|
||
y1 -= 270 / Z;
|
||
} else {
|
||
y1 += 270 / Z;
|
||
}
|
||
} else if (clockwise && y0 < cy || !clockwise && y0 > cy) {
|
||
x1 += 270 / Z;
|
||
} else {
|
||
x1 -= 270 / Z;
|
||
}
|
||
}
|
||
}
|
||
|
||
str.push(type, round(((cx - rx) * sx + x) * Z - Z2), comma, round(((cy - ry) * sy + y) * Z - Z2), comma, round(((cx + rx) * sx + x) * Z - Z2), comma, round(((cy + ry) * sy + y) * Z - Z2), comma, round((x0 * sx + x) * Z - Z2), comma, round((y0 * sy + y) * Z - Z2), comma, round((x1 * sx + x) * Z - Z2), comma, round((y1 * sy + y) * Z - Z2));
|
||
xi = x1;
|
||
yi = y1;
|
||
break;
|
||
|
||
case CMD.R:
|
||
var p0 = points[0];
|
||
var p1 = points[1]; // x0, y0
|
||
|
||
p0[0] = data[i++];
|
||
p0[1] = data[i++]; // x1, y1
|
||
|
||
p1[0] = p0[0] + data[i++];
|
||
p1[1] = p0[1] + data[i++];
|
||
|
||
if (m) {
|
||
applyTransform(p0, p0, m);
|
||
applyTransform(p1, p1, m);
|
||
}
|
||
|
||
p0[0] = round(p0[0] * Z - Z2);
|
||
p1[0] = round(p1[0] * Z - Z2);
|
||
p0[1] = round(p0[1] * Z - Z2);
|
||
p1[1] = round(p1[1] * Z - Z2);
|
||
str.push( // x0, y0
|
||
' m ', p0[0], comma, p0[1], // x1, y0
|
||
' l ', p1[0], comma, p0[1], // x1, y1
|
||
' l ', p1[0], comma, p1[1], // x0, y1
|
||
' l ', p0[0], comma, p1[1]);
|
||
break;
|
||
|
||
case CMD.Z:
|
||
// FIXME Update xi, yi
|
||
str.push(' x ');
|
||
}
|
||
|
||
if (nPoint > 0) {
|
||
str.push(cmdStr);
|
||
|
||
for (var k = 0; k < nPoint; k++) {
|
||
var p = points[k];
|
||
m && applyTransform(p, p, m); // 不 round 会非常慢
|
||
|
||
str.push(round(p[0] * Z - Z2), comma, round(p[1] * Z - Z2), k < nPoint - 1 ? comma : '');
|
||
}
|
||
}
|
||
}
|
||
|
||
return str.join('');
|
||
}; // Rewrite the original path method
|
||
|
||
|
||
Path.prototype.brushVML = function (vmlRoot) {
|
||
var style = this.style;
|
||
var vmlEl = this._vmlEl;
|
||
|
||
if (!vmlEl) {
|
||
vmlEl = vmlCore.createNode('shape');
|
||
initRootElStyle(vmlEl);
|
||
this._vmlEl = vmlEl;
|
||
}
|
||
|
||
updateFillAndStroke(vmlEl, 'fill', style, this);
|
||
updateFillAndStroke(vmlEl, 'stroke', style, this);
|
||
var m = this.transform;
|
||
var needTransform = m != null;
|
||
var strokeEl = vmlEl.getElementsByTagName('stroke')[0];
|
||
|
||
if (strokeEl) {
|
||
var lineWidth = style.lineWidth; // Get the line scale.
|
||
// Determinant of this.m_ means how much the area is enlarged by the
|
||
// transformation. So its square root can be used as a scale factor
|
||
// for width.
|
||
|
||
if (needTransform && !style.strokeNoScale) {
|
||
var det = m[0] * m[3] - m[1] * m[2];
|
||
lineWidth *= sqrt(abs(det));
|
||
}
|
||
|
||
strokeEl.weight = lineWidth + 'px';
|
||
}
|
||
|
||
var path = this.path || (this.path = new PathProxy());
|
||
|
||
if (this.__dirtyPath) {
|
||
path.beginPath();
|
||
path.subPixelOptimize = false;
|
||
this.buildPath(path, this.shape);
|
||
path.toStatic();
|
||
this.__dirtyPath = false;
|
||
}
|
||
|
||
vmlEl.path = pathDataToString(path, this.transform);
|
||
vmlEl.style.zIndex = getZIndex(this.zlevel, this.z, this.z2); // Append to root
|
||
|
||
append(vmlRoot, vmlEl); // Text
|
||
|
||
if (style.text != null) {
|
||
this.drawRectText(vmlRoot, this.getBoundingRect());
|
||
} else {
|
||
this.removeRectText(vmlRoot);
|
||
}
|
||
};
|
||
|
||
Path.prototype.onRemove = function (vmlRoot) {
|
||
remove(vmlRoot, this._vmlEl);
|
||
this.removeRectText(vmlRoot);
|
||
};
|
||
|
||
Path.prototype.onAdd = function (vmlRoot) {
|
||
append(vmlRoot, this._vmlEl);
|
||
this.appendRectText(vmlRoot);
|
||
};
|
||
/***************************************************
|
||
* IMAGE
|
||
**************************************************/
|
||
|
||
|
||
var isImage = function (img) {
|
||
// FIXME img instanceof Image 如果 img 是一个字符串的时候，IE8 下会报错
|
||
return typeof img === 'object' && img.tagName && img.tagName.toUpperCase() === 'IMG'; // return img instanceof Image;
|
||
}; // Rewrite the original path method
|
||
|
||
|
||
ZImage.prototype.brushVML = function (vmlRoot) {
|
||
var style = this.style;
|
||
var image = style.image; // Image original width, height
|
||
|
||
var ow;
|
||
var oh;
|
||
|
||
if (isImage(image)) {
|
||
var src = image.src;
|
||
|
||
if (src === this._imageSrc) {
|
||
ow = this._imageWidth;
|
||
oh = this._imageHeight;
|
||
} else {
|
||
var imageRuntimeStyle = image.runtimeStyle;
|
||
var oldRuntimeWidth = imageRuntimeStyle.width;
|
||
var oldRuntimeHeight = imageRuntimeStyle.height;
|
||
imageRuntimeStyle.width = 'auto';
|
||
imageRuntimeStyle.height = 'auto'; // get the original size
|
||
|
||
ow = image.width;
|
||
oh = image.height; // and remove overides
|
||
|
||
imageRuntimeStyle.width = oldRuntimeWidth;
|
||
imageRuntimeStyle.height = oldRuntimeHeight; // Caching image original width, height and src
|
||
|
||
this._imageSrc = src;
|
||
this._imageWidth = ow;
|
||
this._imageHeight = oh;
|
||
}
|
||
|
||
image = src;
|
||
} else {
|
||
if (image === this._imageSrc) {
|
||
ow = this._imageWidth;
|
||
oh = this._imageHeight;
|
||
}
|
||
}
|
||
|
||
if (!image) {
|
||
return;
|
||
}
|
||
|
||
var x = style.x || 0;
|
||
var y = style.y || 0;
|
||
var dw = style.width;
|
||
var dh = style.height;
|
||
var sw = style.sWidth;
|
||
var sh = style.sHeight;
|
||
var sx = style.sx || 0;
|
||
var sy = style.sy || 0;
|
||
var hasCrop = sw && sh;
|
||
var vmlEl = this._vmlEl;
|
||
|
||
if (!vmlEl) {
|
||
// FIXME 使用 group 在 left, top 都不是 0 的时候就无法显示了。
|
||
// vmlEl = vmlCore.createNode('group');
|
||
vmlEl = vmlCore.doc.createElement('div');
|
||
initRootElStyle(vmlEl);
|
||
this._vmlEl = vmlEl;
|
||
}
|
||
|
||
var vmlElStyle = vmlEl.style;
|
||
var hasRotation = false;
|
||
var m;
|
||
var scaleX = 1;
|
||
var scaleY = 1;
|
||
|
||
if (this.transform) {
|
||
m = this.transform;
|
||
scaleX = sqrt(m[0] * m[0] + m[1] * m[1]);
|
||
scaleY = sqrt(m[2] * m[2] + m[3] * m[3]);
|
||
hasRotation = m[1] || m[2];
|
||
}
|
||
|
||
if (hasRotation) {
|
||
// If filters are necessary (rotation exists), create them
|
||
// filters are bog-slow, so only create them if abbsolutely necessary
|
||
// The following check doesn't account for skews (which don't exist
|
||
// in the canvas spec (yet) anyway.
|
||
// From excanvas
|
||
var p0 = [x, y];
|
||
var p1 = [x + dw, y];
|
||
var p2 = [x, y + dh];
|
||
var p3 = [x + dw, y + dh];
|
||
applyTransform(p0, p0, m);
|
||
applyTransform(p1, p1, m);
|
||
applyTransform(p2, p2, m);
|
||
applyTransform(p3, p3, m);
|
||
var maxX = mathMax(p0[0], p1[0], p2[0], p3[0]);
|
||
var maxY = mathMax(p0[1], p1[1], p2[1], p3[1]);
|
||
var transformFilter = [];
|
||
transformFilter.push('M11=', m[0] / scaleX, comma, 'M12=', m[2] / scaleY, comma, 'M21=', m[1] / scaleX, comma, 'M22=', m[3] / scaleY, comma, 'Dx=', round(x * scaleX + m[4]), comma, 'Dy=', round(y * scaleY + m[5]));
|
||
vmlElStyle.padding = '0 ' + round(maxX) + 'px ' + round(maxY) + 'px 0'; // FIXME DXImageTransform 在 IE11 的兼容模式下不起作用
|
||
|
||
vmlElStyle.filter = imageTransformPrefix + '.Matrix(' + transformFilter.join('') + ', SizingMethod=clip)';
|
||
} else {
|
||
if (m) {
|
||
x = x * scaleX + m[4];
|
||
y = y * scaleY + m[5];
|
||
}
|
||
|
||
vmlElStyle.filter = '';
|
||
vmlElStyle.left = round(x) + 'px';
|
||
vmlElStyle.top = round(y) + 'px';
|
||
}
|
||
|
||
var imageEl = this._imageEl;
|
||
var cropEl = this._cropEl;
|
||
|
||
if (!imageEl) {
|
||
imageEl = vmlCore.doc.createElement('div');
|
||
this._imageEl = imageEl;
|
||
}
|
||
|
||
var imageELStyle = imageEl.style;
|
||
|
||
if (hasCrop) {
|
||
// Needs know image original width and height
|
||
if (!(ow && oh)) {
|
||
var tmpImage = new Image();
|
||
var self = this;
|
||
|
||
tmpImage.onload = function () {
|
||
tmpImage.onload = null;
|
||
ow = tmpImage.width;
|
||
oh = tmpImage.height; // Adjust image width and height to fit the ratio destinationSize / sourceSize
|
||
|
||
imageELStyle.width = round(scaleX * ow * dw / sw) + 'px';
|
||
imageELStyle.height = round(scaleY * oh * dh / sh) + 'px'; // Caching image original width, height and src
|
||
|
||
self._imageWidth = ow;
|
||
self._imageHeight = oh;
|
||
self._imageSrc = image;
|
||
};
|
||
|
||
tmpImage.src = image;
|
||
} else {
|
||
imageELStyle.width = round(scaleX * ow * dw / sw) + 'px';
|
||
imageELStyle.height = round(scaleY * oh * dh / sh) + 'px';
|
||
}
|
||
|
||
if (!cropEl) {
|
||
cropEl = vmlCore.doc.createElement('div');
|
||
cropEl.style.overflow = 'hidden';
|
||
this._cropEl = cropEl;
|
||
}
|
||
|
||
var cropElStyle = cropEl.style;
|
||
cropElStyle.width = round((dw + sx * dw / sw) * scaleX);
|
||
cropElStyle.height = round((dh + sy * dh / sh) * scaleY);
|
||
cropElStyle.filter = imageTransformPrefix + '.Matrix(Dx=' + -sx * dw / sw * scaleX + ',Dy=' + -sy * dh / sh * scaleY + ')';
|
||
|
||
if (!cropEl.parentNode) {
|
||
vmlEl.appendChild(cropEl);
|
||
}
|
||
|
||
if (imageEl.parentNode !== cropEl) {
|
||
cropEl.appendChild(imageEl);
|
||
}
|
||
} else {
|
||
imageELStyle.width = round(scaleX * dw) + 'px';
|
||
imageELStyle.height = round(scaleY * dh) + 'px';
|
||
vmlEl.appendChild(imageEl);
|
||
|
||
if (cropEl && cropEl.parentNode) {
|
||
vmlEl.removeChild(cropEl);
|
||
this._cropEl = null;
|
||
}
|
||
}
|
||
|
||
var filterStr = '';
|
||
var alpha = style.opacity;
|
||
|
||
if (alpha < 1) {
|
||
filterStr += '.Alpha(opacity=' + round(alpha * 100) + ') ';
|
||
}
|
||
|
||
filterStr += imageTransformPrefix + '.AlphaImageLoader(src=' + image + ', SizingMethod=scale)';
|
||
imageELStyle.filter = filterStr;
|
||
vmlEl.style.zIndex = getZIndex(this.zlevel, this.z, this.z2); // Append to root
|
||
|
||
append(vmlRoot, vmlEl); // Text
|
||
|
||
if (style.text != null) {
|
||
this.drawRectText(vmlRoot, this.getBoundingRect());
|
||
}
|
||
};
|
||
|
||
ZImage.prototype.onRemove = function (vmlRoot) {
|
||
remove(vmlRoot, this._vmlEl);
|
||
this._vmlEl = null;
|
||
this._cropEl = null;
|
||
this._imageEl = null;
|
||
this.removeRectText(vmlRoot);
|
||
};
|
||
|
||
ZImage.prototype.onAdd = function (vmlRoot) {
|
||
append(vmlRoot, this._vmlEl);
|
||
this.appendRectText(vmlRoot);
|
||
};
|
||
/***************************************************
|
||
* TEXT
|
||
**************************************************/
|
||
|
||
|
||
var DEFAULT_STYLE_NORMAL = 'normal';
|
||
var fontStyleCache = {};
|
||
var fontStyleCacheCount = 0;
|
||
var MAX_FONT_CACHE_SIZE = 100;
|
||
var fontEl = document.createElement('div');
|
||
|
||
var getFontStyle = function (fontString) {
|
||
var fontStyle = fontStyleCache[fontString];
|
||
|
||
if (!fontStyle) {
|
||
// Clear cache
|
||
if (fontStyleCacheCount > MAX_FONT_CACHE_SIZE) {
|
||
fontStyleCacheCount = 0;
|
||
fontStyleCache = {};
|
||
}
|
||
|
||
var style = fontEl.style;
|
||
var fontFamily;
|
||
|
||
try {
|
||
style.font = fontString;
|
||
fontFamily = style.fontFamily.split(',')[0];
|
||
} catch (e) {}
|
||
|
||
fontStyle = {
|
||
style: style.fontStyle || DEFAULT_STYLE_NORMAL,
|
||
variant: style.fontVariant || DEFAULT_STYLE_NORMAL,
|
||
weight: style.fontWeight || DEFAULT_STYLE_NORMAL,
|
||
size: parseFloat(style.fontSize || 12) | 0,
|
||
family: fontFamily || 'Microsoft YaHei'
|
||
};
|
||
fontStyleCache[fontString] = fontStyle;
|
||
fontStyleCacheCount++;
|
||
}
|
||
|
||
return fontStyle;
|
||
};
|
||
|
||
var textMeasureEl; // Overwrite measure text method
|
||
|
||
textContain.$override('measureText', function (text, textFont) {
|
||
var doc = vmlCore.doc;
|
||
|
||
if (!textMeasureEl) {
|
||
textMeasureEl = doc.createElement('div');
|
||
textMeasureEl.style.cssText = 'position:absolute;top:-20000px;left:0;' + 'padding:0;margin:0;border:none;white-space:pre;';
|
||
vmlCore.doc.body.appendChild(textMeasureEl);
|
||
}
|
||
|
||
try {
|
||
textMeasureEl.style.font = textFont;
|
||
} catch (ex) {// Ignore failures to set to invalid font.
|
||
}
|
||
|
||
textMeasureEl.innerHTML = ''; // Don't use innerHTML or innerText because they allow markup/whitespace.
|
||
|
||
textMeasureEl.appendChild(doc.createTextNode(text));
|
||
return {
|
||
width: textMeasureEl.offsetWidth
|
||
};
|
||
});
|
||
var tmpRect = new BoundingRect();
|
||
|
||
var drawRectText = function (vmlRoot, rect, textRect, fromTextEl) {
|
||
var style = this.style; // Optimize, avoid normalize every time.
|
||
|
||
this.__dirty && textHelper.normalizeTextStyle(style, true);
|
||
var text = style.text; // Convert to string
|
||
|
||
text != null && (text += '');
|
||
|
||
if (!text) {
|
||
return;
|
||
} // Convert rich text to plain text. Rich text is not supported in
|
||
// IE8-, but tags in rich text template will be removed.
|
||
|
||
|
||
if (style.rich) {
|
||
var contentBlock = textContain.parseRichText(text, style);
|
||
text = [];
|
||
|
||
for (var i = 0; i < contentBlock.lines.length; i++) {
|
||
var tokens = contentBlock.lines[i].tokens;
|
||
var textLine = [];
|
||
|
||
for (var j = 0; j < tokens.length; j++) {
|
||
textLine.push(tokens[j].text);
|
||
}
|
||
|
||
text.push(textLine.join(''));
|
||
}
|
||
|
||
text = text.join('\n');
|
||
}
|
||
|
||
var x;
|
||
var y;
|
||
var align = style.textAlign;
|
||
var verticalAlign = style.textVerticalAlign;
|
||
var fontStyle = getFontStyle(style.font); // FIXME encodeHtmlAttribute ?
|
||
|
||
var font = fontStyle.style + ' ' + fontStyle.variant + ' ' + fontStyle.weight + ' ' + fontStyle.size + 'px "' + fontStyle.family + '"';
|
||
textRect = textRect || textContain.getBoundingRect(text, font, align, verticalAlign, style.textPadding, style.textLineHeight); // Transform rect to view space
|
||
|
||
var m = this.transform; // Ignore transform for text in other element
|
||
|
||
if (m && !fromTextEl) {
|
||
tmpRect.copy(rect);
|
||
tmpRect.applyTransform(m);
|
||
rect = tmpRect;
|
||
}
|
||
|
||
if (!fromTextEl) {
|
||
var textPosition = style.textPosition;
|
||
var distance = style.textDistance; // Text position represented by coord
|
||
|
||
if (textPosition instanceof Array) {
|
||
x = rect.x + parsePercent(textPosition[0], rect.width);
|
||
y = rect.y + parsePercent(textPosition[1], rect.height);
|
||
align = align || 'left';
|
||
} else {
|
||
var res = textContain.adjustTextPositionOnRect(textPosition, rect, distance);
|
||
x = res.x;
|
||
y = res.y; // Default align and baseline when has textPosition
|
||
|
||
align = align || res.textAlign;
|
||
verticalAlign = verticalAlign || res.textVerticalAlign;
|
||
}
|
||
} else {
|
||
x = rect.x;
|
||
y = rect.y;
|
||
}
|
||
|
||
x = textContain.adjustTextX(x, textRect.width, align);
|
||
y = textContain.adjustTextY(y, textRect.height, verticalAlign); // Force baseline 'middle'
|
||
|
||
y += textRect.height / 2; // var fontSize = fontStyle.size;
|
||
// 1.75 is an arbitrary number, as there is no info about the text baseline
|
||
// switch (baseline) {
|
||
// case 'hanging':
|
||
// case 'top':
|
||
// y += fontSize / 1.75;
|
||
// break;
|
||
// case 'middle':
|
||
// break;
|
||
// default:
|
||
// // case null:
|
||
// // case 'alphabetic':
|
||
// // case 'ideographic':
|
||
// // case 'bottom':
|
||
// y -= fontSize / 2.25;
|
||
// break;
|
||
// }
|
||
// switch (align) {
|
||
// case 'left':
|
||
// break;
|
||
// case 'center':
|
||
// x -= textRect.width / 2;
|
||
// break;
|
||
// case 'right':
|
||
// x -= textRect.width;
|
||
// break;
|
||
// case 'end':
|
||
// align = elementStyle.direction == 'ltr' ? 'right' : 'left';
|
||
// break;
|
||
// case 'start':
|
||
// align = elementStyle.direction == 'rtl' ? 'right' : 'left';
|
||
// break;
|
||
// default:
|
||
// align = 'left';
|
||
// }
|
||
|
||
var createNode = vmlCore.createNode;
|
||
var textVmlEl = this._textVmlEl;
|
||
var pathEl;
|
||
var textPathEl;
|
||
var skewEl;
|
||
|
||
if (!textVmlEl) {
|
||
textVmlEl = createNode('line');
|
||
pathEl = createNode('path');
|
||
textPathEl = createNode('textpath');
|
||
skewEl = createNode('skew'); // FIXME Why here is not cammel case
|
||
// Align 'center' seems wrong
|
||
|
||
textPathEl.style['v-text-align'] = 'left';
|
||
initRootElStyle(textVmlEl);
|
||
pathEl.textpathok = true;
|
||
textPathEl.on = true;
|
||
textVmlEl.from = '0 0';
|
||
textVmlEl.to = '1000 0.05';
|
||
append(textVmlEl, skewEl);
|
||
append(textVmlEl, pathEl);
|
||
append(textVmlEl, textPathEl);
|
||
this._textVmlEl = textVmlEl;
|
||
} else {
|
||
// 这里是在前面 appendChild 保证顺序的前提下
|
||
skewEl = textVmlEl.firstChild;
|
||
pathEl = skewEl.nextSibling;
|
||
textPathEl = pathEl.nextSibling;
|
||
}
|
||
|
||
var coords = [x, y];
|
||
var textVmlElStyle = textVmlEl.style; // Ignore transform for text in other element
|
||
|
||
if (m && fromTextEl) {
|
||
applyTransform(coords, coords, m);
|
||
skewEl.on = true;
|
||
skewEl.matrix = m[0].toFixed(3) + comma + m[2].toFixed(3) + comma + m[1].toFixed(3) + comma + m[3].toFixed(3) + ',0,0'; // Text position
|
||
|
||
skewEl.offset = (round(coords[0]) || 0) + ',' + (round(coords[1]) || 0); // Left top point as origin
|
||
|
||
skewEl.origin = '0 0';
|
||
textVmlElStyle.left = '0px';
|
||
textVmlElStyle.top = '0px';
|
||
} else {
|
||
skewEl.on = false;
|
||
textVmlElStyle.left = round(x) + 'px';
|
||
textVmlElStyle.top = round(y) + 'px';
|
||
}
|
||
|
||
textPathEl.string = encodeHtmlAttribute(text); // TODO
|
||
|
||
try {
|
||
textPathEl.style.font = font;
|
||
} // Error font format
|
||
catch (e) {}
|
||
|
||
updateFillAndStroke(textVmlEl, 'fill', {
|
||
fill: style.textFill,
|
||
opacity: style.opacity
|
||
}, this);
|
||
updateFillAndStroke(textVmlEl, 'stroke', {
|
||
stroke: style.textStroke,
|
||
opacity: style.opacity,
|
||
lineDash: style.lineDash
|
||
}, this);
|
||
textVmlEl.style.zIndex = getZIndex(this.zlevel, this.z, this.z2); // Attached to root
|
||
|
||
append(vmlRoot, textVmlEl);
|
||
};
|
||
|
||
var removeRectText = function (vmlRoot) {
|
||
remove(vmlRoot, this._textVmlEl);
|
||
this._textVmlEl = null;
|
||
};
|
||
|
||
var appendRectText = function (vmlRoot) {
|
||
append(vmlRoot, this._textVmlEl);
|
||
};
|
||
|
||
var list = [RectText, Displayable, ZImage, Path, Text]; // In case Displayable has been mixed in RectText
|
||
|
||
for (var i = 0; i < list.length; i++) {
|
||
var proto = list[i].prototype;
|
||
proto.drawRectText = drawRectText;
|
||
proto.removeRectText = removeRectText;
|
||
proto.appendRectText = appendRectText;
|
||
}
|
||
|
||
Text.prototype.brushVML = function (vmlRoot) {
|
||
var style = this.style;
|
||
|
||
if (style.text != null) {
|
||
this.drawRectText(vmlRoot, {
|
||
x: style.x || 0,
|
||
y: style.y || 0,
|
||
width: 0,
|
||
height: 0
|
||
}, this.getBoundingRect(), true);
|
||
} else {
|
||
this.removeRectText(vmlRoot);
|
||
}
|
||
};
|
||
|
||
Text.prototype.onRemove = function (vmlRoot) {
|
||
this.removeRectText(vmlRoot);
|
||
};
|
||
|
||
Text.prototype.onAdd = function (vmlRoot) {
|
||
this.appendRectText(vmlRoot);
|
||
};
|
||
} |