521 lines
15 KiB
JavaScript
521 lines
15 KiB
JavaScript
import { Util } from './Util.js';
|
|
import { Konva } from './Global.js';
|
|
function simplifyArray(arr) {
|
|
var retArr = [], len = arr.length, util = Util, n, val;
|
|
for (n = 0; n < len; n++) {
|
|
val = arr[n];
|
|
if (util._isNumber(val)) {
|
|
val = Math.round(val * 1000) / 1000;
|
|
}
|
|
else if (!util._isString(val)) {
|
|
val = val + '';
|
|
}
|
|
retArr.push(val);
|
|
}
|
|
return retArr;
|
|
}
|
|
var COMMA = ',', OPEN_PAREN = '(', CLOSE_PAREN = ')', OPEN_PAREN_BRACKET = '([', CLOSE_BRACKET_PAREN = '])', SEMICOLON = ';', DOUBLE_PAREN = '()', EQUALS = '=', CONTEXT_METHODS = [
|
|
'arc',
|
|
'arcTo',
|
|
'beginPath',
|
|
'bezierCurveTo',
|
|
'clearRect',
|
|
'clip',
|
|
'closePath',
|
|
'createLinearGradient',
|
|
'createPattern',
|
|
'createRadialGradient',
|
|
'drawImage',
|
|
'ellipse',
|
|
'fill',
|
|
'fillText',
|
|
'getImageData',
|
|
'createImageData',
|
|
'lineTo',
|
|
'moveTo',
|
|
'putImageData',
|
|
'quadraticCurveTo',
|
|
'rect',
|
|
'restore',
|
|
'rotate',
|
|
'save',
|
|
'scale',
|
|
'setLineDash',
|
|
'setTransform',
|
|
'stroke',
|
|
'strokeText',
|
|
'transform',
|
|
'translate',
|
|
];
|
|
var CONTEXT_PROPERTIES = [
|
|
'fillStyle',
|
|
'strokeStyle',
|
|
'shadowColor',
|
|
'shadowBlur',
|
|
'shadowOffsetX',
|
|
'shadowOffsetY',
|
|
'lineCap',
|
|
'lineDashOffset',
|
|
'lineJoin',
|
|
'lineWidth',
|
|
'miterLimit',
|
|
'font',
|
|
'textAlign',
|
|
'textBaseline',
|
|
'globalAlpha',
|
|
'globalCompositeOperation',
|
|
'imageSmoothingEnabled',
|
|
];
|
|
const traceArrMax = 100;
|
|
export class Context {
|
|
constructor(canvas) {
|
|
this.canvas = canvas;
|
|
this._context = canvas._canvas.getContext('2d');
|
|
if (Konva.enableTrace) {
|
|
this.traceArr = [];
|
|
this._enableTrace();
|
|
}
|
|
}
|
|
fillShape(shape) {
|
|
if (shape.fillEnabled()) {
|
|
this._fill(shape);
|
|
}
|
|
}
|
|
_fill(shape) {
|
|
}
|
|
strokeShape(shape) {
|
|
if (shape.hasStroke()) {
|
|
this._stroke(shape);
|
|
}
|
|
}
|
|
_stroke(shape) {
|
|
}
|
|
fillStrokeShape(shape) {
|
|
if (shape.attrs.fillAfterStrokeEnabled) {
|
|
this.strokeShape(shape);
|
|
this.fillShape(shape);
|
|
}
|
|
else {
|
|
this.fillShape(shape);
|
|
this.strokeShape(shape);
|
|
}
|
|
}
|
|
getTrace(relaxed, rounded) {
|
|
var traceArr = this.traceArr, len = traceArr.length, str = '', n, trace, method, args;
|
|
for (n = 0; n < len; n++) {
|
|
trace = traceArr[n];
|
|
method = trace.method;
|
|
if (method) {
|
|
args = trace.args;
|
|
str += method;
|
|
if (relaxed) {
|
|
str += DOUBLE_PAREN;
|
|
}
|
|
else {
|
|
if (Util._isArray(args[0])) {
|
|
str += OPEN_PAREN_BRACKET + args.join(COMMA) + CLOSE_BRACKET_PAREN;
|
|
}
|
|
else {
|
|
if (rounded) {
|
|
args = args.map((a) => typeof a === 'number' ? Math.floor(a) : a);
|
|
}
|
|
str += OPEN_PAREN + args.join(COMMA) + CLOSE_PAREN;
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
str += trace.property;
|
|
if (!relaxed) {
|
|
str += EQUALS + trace.val;
|
|
}
|
|
}
|
|
str += SEMICOLON;
|
|
}
|
|
return str;
|
|
}
|
|
clearTrace() {
|
|
this.traceArr = [];
|
|
}
|
|
_trace(str) {
|
|
var traceArr = this.traceArr, len;
|
|
traceArr.push(str);
|
|
len = traceArr.length;
|
|
if (len >= traceArrMax) {
|
|
traceArr.shift();
|
|
}
|
|
}
|
|
reset() {
|
|
var pixelRatio = this.getCanvas().getPixelRatio();
|
|
this.setTransform(1 * pixelRatio, 0, 0, 1 * pixelRatio, 0, 0);
|
|
}
|
|
getCanvas() {
|
|
return this.canvas;
|
|
}
|
|
clear(bounds) {
|
|
var canvas = this.getCanvas();
|
|
if (bounds) {
|
|
this.clearRect(bounds.x || 0, bounds.y || 0, bounds.width || 0, bounds.height || 0);
|
|
}
|
|
else {
|
|
this.clearRect(0, 0, canvas.getWidth() / canvas.pixelRatio, canvas.getHeight() / canvas.pixelRatio);
|
|
}
|
|
}
|
|
_applyLineCap(shape) {
|
|
var lineCap = shape.getLineCap();
|
|
if (lineCap) {
|
|
this.setAttr('lineCap', lineCap);
|
|
}
|
|
}
|
|
_applyOpacity(shape) {
|
|
var absOpacity = shape.getAbsoluteOpacity();
|
|
if (absOpacity !== 1) {
|
|
this.setAttr('globalAlpha', absOpacity);
|
|
}
|
|
}
|
|
_applyLineJoin(shape) {
|
|
var lineJoin = shape.attrs.lineJoin;
|
|
if (lineJoin) {
|
|
this.setAttr('lineJoin', lineJoin);
|
|
}
|
|
}
|
|
setAttr(attr, val) {
|
|
this._context[attr] = val;
|
|
}
|
|
arc(a0, a1, a2, a3, a4, a5) {
|
|
this._context.arc(a0, a1, a2, a3, a4, a5);
|
|
}
|
|
arcTo(a0, a1, a2, a3, a4) {
|
|
this._context.arcTo(a0, a1, a2, a3, a4);
|
|
}
|
|
beginPath() {
|
|
this._context.beginPath();
|
|
}
|
|
bezierCurveTo(a0, a1, a2, a3, a4, a5) {
|
|
this._context.bezierCurveTo(a0, a1, a2, a3, a4, a5);
|
|
}
|
|
clearRect(a0, a1, a2, a3) {
|
|
this._context.clearRect(a0, a1, a2, a3);
|
|
}
|
|
clip() {
|
|
this._context.clip();
|
|
}
|
|
closePath() {
|
|
this._context.closePath();
|
|
}
|
|
createImageData(a0, a1) {
|
|
var a = arguments;
|
|
if (a.length === 2) {
|
|
return this._context.createImageData(a0, a1);
|
|
}
|
|
else if (a.length === 1) {
|
|
return this._context.createImageData(a0);
|
|
}
|
|
}
|
|
createLinearGradient(a0, a1, a2, a3) {
|
|
return this._context.createLinearGradient(a0, a1, a2, a3);
|
|
}
|
|
createPattern(a0, a1) {
|
|
return this._context.createPattern(a0, a1);
|
|
}
|
|
createRadialGradient(a0, a1, a2, a3, a4, a5) {
|
|
return this._context.createRadialGradient(a0, a1, a2, a3, a4, a5);
|
|
}
|
|
drawImage(a0, a1, a2, a3, a4, a5, a6, a7, a8) {
|
|
var a = arguments, _context = this._context;
|
|
if (a.length === 3) {
|
|
_context.drawImage(a0, a1, a2);
|
|
}
|
|
else if (a.length === 5) {
|
|
_context.drawImage(a0, a1, a2, a3, a4);
|
|
}
|
|
else if (a.length === 9) {
|
|
_context.drawImage(a0, a1, a2, a3, a4, a5, a6, a7, a8);
|
|
}
|
|
}
|
|
ellipse(a0, a1, a2, a3, a4, a5, a6, a7) {
|
|
this._context.ellipse(a0, a1, a2, a3, a4, a5, a6, a7);
|
|
}
|
|
isPointInPath(x, y) {
|
|
return this._context.isPointInPath(x, y);
|
|
}
|
|
fill(path2d) {
|
|
if (path2d) {
|
|
this._context.fill(path2d);
|
|
}
|
|
else {
|
|
this._context.fill();
|
|
}
|
|
}
|
|
fillRect(x, y, width, height) {
|
|
this._context.fillRect(x, y, width, height);
|
|
}
|
|
strokeRect(x, y, width, height) {
|
|
this._context.strokeRect(x, y, width, height);
|
|
}
|
|
fillText(text, x, y, maxWidth) {
|
|
if (maxWidth) {
|
|
this._context.fillText(text, x, y, maxWidth);
|
|
}
|
|
else {
|
|
this._context.fillText(text, x, y);
|
|
}
|
|
}
|
|
measureText(text) {
|
|
return this._context.measureText(text);
|
|
}
|
|
getImageData(a0, a1, a2, a3) {
|
|
return this._context.getImageData(a0, a1, a2, a3);
|
|
}
|
|
lineTo(a0, a1) {
|
|
this._context.lineTo(a0, a1);
|
|
}
|
|
moveTo(a0, a1) {
|
|
this._context.moveTo(a0, a1);
|
|
}
|
|
rect(a0, a1, a2, a3) {
|
|
this._context.rect(a0, a1, a2, a3);
|
|
}
|
|
putImageData(a0, a1, a2) {
|
|
this._context.putImageData(a0, a1, a2);
|
|
}
|
|
quadraticCurveTo(a0, a1, a2, a3) {
|
|
this._context.quadraticCurveTo(a0, a1, a2, a3);
|
|
}
|
|
restore() {
|
|
this._context.restore();
|
|
}
|
|
rotate(a0) {
|
|
this._context.rotate(a0);
|
|
}
|
|
save() {
|
|
this._context.save();
|
|
}
|
|
scale(a0, a1) {
|
|
this._context.scale(a0, a1);
|
|
}
|
|
setLineDash(a0) {
|
|
if (this._context.setLineDash) {
|
|
this._context.setLineDash(a0);
|
|
}
|
|
else if ('mozDash' in this._context) {
|
|
this._context['mozDash'] = a0;
|
|
}
|
|
else if ('webkitLineDash' in this._context) {
|
|
this._context['webkitLineDash'] = a0;
|
|
}
|
|
}
|
|
getLineDash() {
|
|
return this._context.getLineDash();
|
|
}
|
|
setTransform(a0, a1, a2, a3, a4, a5) {
|
|
this._context.setTransform(a0, a1, a2, a3, a4, a5);
|
|
}
|
|
stroke(path2d) {
|
|
if (path2d) {
|
|
this._context.stroke(path2d);
|
|
}
|
|
else {
|
|
this._context.stroke();
|
|
}
|
|
}
|
|
strokeText(a0, a1, a2, a3) {
|
|
this._context.strokeText(a0, a1, a2, a3);
|
|
}
|
|
transform(a0, a1, a2, a3, a4, a5) {
|
|
this._context.transform(a0, a1, a2, a3, a4, a5);
|
|
}
|
|
translate(a0, a1) {
|
|
this._context.translate(a0, a1);
|
|
}
|
|
_enableTrace() {
|
|
var that = this, len = CONTEXT_METHODS.length, origSetter = this.setAttr, n, args;
|
|
var func = function (methodName) {
|
|
var origMethod = that[methodName], ret;
|
|
that[methodName] = function () {
|
|
args = simplifyArray(Array.prototype.slice.call(arguments, 0));
|
|
ret = origMethod.apply(that, arguments);
|
|
that._trace({
|
|
method: methodName,
|
|
args: args,
|
|
});
|
|
return ret;
|
|
};
|
|
};
|
|
for (n = 0; n < len; n++) {
|
|
func(CONTEXT_METHODS[n]);
|
|
}
|
|
that.setAttr = function () {
|
|
origSetter.apply(that, arguments);
|
|
var prop = arguments[0];
|
|
var val = arguments[1];
|
|
if (prop === 'shadowOffsetX' ||
|
|
prop === 'shadowOffsetY' ||
|
|
prop === 'shadowBlur') {
|
|
val = val / this.canvas.getPixelRatio();
|
|
}
|
|
that._trace({
|
|
property: prop,
|
|
val: val,
|
|
});
|
|
};
|
|
}
|
|
_applyGlobalCompositeOperation(node) {
|
|
const op = node.attrs.globalCompositeOperation;
|
|
var def = !op || op === 'source-over';
|
|
if (!def) {
|
|
this.setAttr('globalCompositeOperation', op);
|
|
}
|
|
}
|
|
}
|
|
CONTEXT_PROPERTIES.forEach(function (prop) {
|
|
Object.defineProperty(Context.prototype, prop, {
|
|
get() {
|
|
return this._context[prop];
|
|
},
|
|
set(val) {
|
|
this._context[prop] = val;
|
|
},
|
|
});
|
|
});
|
|
export class SceneContext extends Context {
|
|
_fillColor(shape) {
|
|
var fill = shape.fill();
|
|
this.setAttr('fillStyle', fill);
|
|
shape._fillFunc(this);
|
|
}
|
|
_fillPattern(shape) {
|
|
this.setAttr('fillStyle', shape._getFillPattern());
|
|
shape._fillFunc(this);
|
|
}
|
|
_fillLinearGradient(shape) {
|
|
var grd = shape._getLinearGradient();
|
|
if (grd) {
|
|
this.setAttr('fillStyle', grd);
|
|
shape._fillFunc(this);
|
|
}
|
|
}
|
|
_fillRadialGradient(shape) {
|
|
var grd = shape._getRadialGradient();
|
|
if (grd) {
|
|
this.setAttr('fillStyle', grd);
|
|
shape._fillFunc(this);
|
|
}
|
|
}
|
|
_fill(shape) {
|
|
var hasColor = shape.fill(), fillPriority = shape.getFillPriority();
|
|
if (hasColor && fillPriority === 'color') {
|
|
this._fillColor(shape);
|
|
return;
|
|
}
|
|
var hasPattern = shape.getFillPatternImage();
|
|
if (hasPattern && fillPriority === 'pattern') {
|
|
this._fillPattern(shape);
|
|
return;
|
|
}
|
|
var hasLinearGradient = shape.getFillLinearGradientColorStops();
|
|
if (hasLinearGradient && fillPriority === 'linear-gradient') {
|
|
this._fillLinearGradient(shape);
|
|
return;
|
|
}
|
|
var hasRadialGradient = shape.getFillRadialGradientColorStops();
|
|
if (hasRadialGradient && fillPriority === 'radial-gradient') {
|
|
this._fillRadialGradient(shape);
|
|
return;
|
|
}
|
|
if (hasColor) {
|
|
this._fillColor(shape);
|
|
}
|
|
else if (hasPattern) {
|
|
this._fillPattern(shape);
|
|
}
|
|
else if (hasLinearGradient) {
|
|
this._fillLinearGradient(shape);
|
|
}
|
|
else if (hasRadialGradient) {
|
|
this._fillRadialGradient(shape);
|
|
}
|
|
}
|
|
_strokeLinearGradient(shape) {
|
|
var start = shape.getStrokeLinearGradientStartPoint(), end = shape.getStrokeLinearGradientEndPoint(), colorStops = shape.getStrokeLinearGradientColorStops(), grd = this.createLinearGradient(start.x, start.y, end.x, end.y);
|
|
if (colorStops) {
|
|
for (var n = 0; n < colorStops.length; n += 2) {
|
|
grd.addColorStop(colorStops[n], colorStops[n + 1]);
|
|
}
|
|
this.setAttr('strokeStyle', grd);
|
|
}
|
|
}
|
|
_stroke(shape) {
|
|
var dash = shape.dash(), strokeScaleEnabled = shape.getStrokeScaleEnabled();
|
|
if (shape.hasStroke()) {
|
|
if (!strokeScaleEnabled) {
|
|
this.save();
|
|
var pixelRatio = this.getCanvas().getPixelRatio();
|
|
this.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
|
}
|
|
this._applyLineCap(shape);
|
|
if (dash && shape.dashEnabled()) {
|
|
this.setLineDash(dash);
|
|
this.setAttr('lineDashOffset', shape.dashOffset());
|
|
}
|
|
this.setAttr('lineWidth', shape.strokeWidth());
|
|
if (!shape.getShadowForStrokeEnabled()) {
|
|
this.setAttr('shadowColor', 'rgba(0,0,0,0)');
|
|
}
|
|
var hasLinearGradient = shape.getStrokeLinearGradientColorStops();
|
|
if (hasLinearGradient) {
|
|
this._strokeLinearGradient(shape);
|
|
}
|
|
else {
|
|
this.setAttr('strokeStyle', shape.stroke());
|
|
}
|
|
shape._strokeFunc(this);
|
|
if (!strokeScaleEnabled) {
|
|
this.restore();
|
|
}
|
|
}
|
|
}
|
|
_applyShadow(shape) {
|
|
var _a, _b, _c;
|
|
var color = (_a = shape.getShadowRGBA()) !== null && _a !== void 0 ? _a : 'black', blur = (_b = shape.getShadowBlur()) !== null && _b !== void 0 ? _b : 5, offset = (_c = shape.getShadowOffset()) !== null && _c !== void 0 ? _c : {
|
|
x: 0,
|
|
y: 0,
|
|
}, scale = shape.getAbsoluteScale(), ratio = this.canvas.getPixelRatio(), scaleX = scale.x * ratio, scaleY = scale.y * ratio;
|
|
this.setAttr('shadowColor', color);
|
|
this.setAttr('shadowBlur', blur * Math.min(Math.abs(scaleX), Math.abs(scaleY)));
|
|
this.setAttr('shadowOffsetX', offset.x * scaleX);
|
|
this.setAttr('shadowOffsetY', offset.y * scaleY);
|
|
}
|
|
}
|
|
export class HitContext extends Context {
|
|
_fill(shape) {
|
|
this.save();
|
|
this.setAttr('fillStyle', shape.colorKey);
|
|
shape._fillFuncHit(this);
|
|
this.restore();
|
|
}
|
|
strokeShape(shape) {
|
|
if (shape.hasHitStroke()) {
|
|
this._stroke(shape);
|
|
}
|
|
}
|
|
_stroke(shape) {
|
|
if (shape.hasHitStroke()) {
|
|
var strokeScaleEnabled = shape.getStrokeScaleEnabled();
|
|
if (!strokeScaleEnabled) {
|
|
this.save();
|
|
var pixelRatio = this.getCanvas().getPixelRatio();
|
|
this.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
|
}
|
|
this._applyLineCap(shape);
|
|
var hitStrokeWidth = shape.hitStrokeWidth();
|
|
var strokeWidth = hitStrokeWidth === 'auto' ? shape.strokeWidth() : hitStrokeWidth;
|
|
this.setAttr('lineWidth', strokeWidth);
|
|
this.setAttr('strokeStyle', shape.colorKey);
|
|
shape._strokeFuncHit(this);
|
|
if (!strokeScaleEnabled) {
|
|
this.restore();
|
|
}
|
|
}
|
|
}
|
|
}
|