konva
Version:
<p align="center"> <img src="https://raw.githubusercontent.com/konvajs/konvajs.github.io/master/apple-touch-icon-180x180.png" alt="Konva logo" height="180" /> </p>
522 lines (521 loc) • 18.8 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var Util_1 = require("./Util");
var Global_1 = require("./Global");
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'
];
var traceArrMax = 100;
var Context = (function () {
function Context(canvas) {
this.canvas = canvas;
this._context = canvas._canvas.getContext('2d');
if (Global_1.Konva.enableTrace) {
this.traceArr = [];
this._enableTrace();
}
}
Context.prototype.fillShape = function (shape) {
if (shape.getFillEnabled()) {
this._fill(shape);
}
};
Context.prototype._fill = function (shape) {
};
Context.prototype.strokeShape = function (shape) {
if (shape.getStrokeEnabled()) {
this._stroke(shape);
}
};
Context.prototype._stroke = function (shape) {
};
Context.prototype.fillStrokeShape = function (shape) {
if (shape.getFillEnabled()) {
this._fill(shape);
}
if (shape.getStrokeEnabled()) {
this._stroke(shape);
}
};
Context.prototype.getTrace = function (relaxed) {
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_1.Util._isArray(args[0])) {
str += OPEN_PAREN_BRACKET + args.join(COMMA) + CLOSE_BRACKET_PAREN;
}
else {
str += OPEN_PAREN + args.join(COMMA) + CLOSE_PAREN;
}
}
}
else {
str += trace.property;
if (!relaxed) {
str += EQUALS + trace.val;
}
}
str += SEMICOLON;
}
return str;
};
Context.prototype.clearTrace = function () {
this.traceArr = [];
};
Context.prototype._trace = function (str) {
var traceArr = this.traceArr, len;
traceArr.push(str);
len = traceArr.length;
if (len >= traceArrMax) {
traceArr.shift();
}
};
Context.prototype.reset = function () {
var pixelRatio = this.getCanvas().getPixelRatio();
this.setTransform(1 * pixelRatio, 0, 0, 1 * pixelRatio, 0, 0);
};
Context.prototype.getCanvas = function () {
return this.canvas;
};
Context.prototype.clear = function (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);
}
};
Context.prototype._applyLineCap = function (shape) {
var lineCap = shape.getLineCap();
if (lineCap) {
this.setAttr('lineCap', lineCap);
}
};
Context.prototype._applyOpacity = function (shape) {
var absOpacity = shape.getAbsoluteOpacity();
if (absOpacity !== 1) {
this.setAttr('globalAlpha', absOpacity);
}
};
Context.prototype._applyLineJoin = function (shape) {
var lineJoin = shape.getLineJoin();
if (lineJoin) {
this.setAttr('lineJoin', lineJoin);
}
};
Context.prototype.setAttr = function (attr, val) {
this._context[attr] = val;
};
Context.prototype.arc = function (a0, a1, a2, a3, a4, a5) {
this._context.arc(a0, a1, a2, a3, a4, a5);
};
Context.prototype.arcTo = function (a0, a1, a2, a3, a4, a5) {
this._context.arc(a0, a1, a2, a3, a4, a5);
};
Context.prototype.beginPath = function () {
this._context.beginPath();
};
Context.prototype.bezierCurveTo = function (a0, a1, a2, a3, a4, a5) {
this._context.bezierCurveTo(a0, a1, a2, a3, a4, a5);
};
Context.prototype.clearRect = function (a0, a1, a2, a3) {
this._context.clearRect(a0, a1, a2, a3);
};
Context.prototype.clip = function () {
this._context.clip();
};
Context.prototype.closePath = function () {
this._context.closePath();
};
Context.prototype.createImageData = function (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);
}
};
Context.prototype.createLinearGradient = function (a0, a1, a2, a3) {
return this._context.createLinearGradient(a0, a1, a2, a3);
};
Context.prototype.createPattern = function (a0, a1) {
return this._context.createPattern(a0, a1);
};
Context.prototype.createRadialGradient = function (a0, a1, a2, a3, a4, a5) {
return this._context.createRadialGradient(a0, a1, a2, a3, a4, a5);
};
Context.prototype.drawImage = function (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);
}
};
Context.prototype.ellipse = function (a0, a1, a2, a3, a4, a5, a6, a7) {
this._context.ellipse(a0, a1, a2, a3, a4, a5, a6, a7);
};
Context.prototype.isPointInPath = function (x, y) {
return this._context.isPointInPath(x, y);
};
Context.prototype.fill = function () {
this._context.fill();
};
Context.prototype.fillRect = function (x, y, width, height) {
this._context.fillRect(x, y, width, height);
};
Context.prototype.strokeRect = function (x, y, width, height) {
this._context.strokeRect(x, y, width, height);
};
Context.prototype.fillText = function (a0, a1, a2) {
this._context.fillText(a0, a1, a2);
};
Context.prototype.measureText = function (text) {
return this._context.measureText(text);
};
Context.prototype.getImageData = function (a0, a1, a2, a3) {
return this._context.getImageData(a0, a1, a2, a3);
};
Context.prototype.lineTo = function (a0, a1) {
this._context.lineTo(a0, a1);
};
Context.prototype.moveTo = function (a0, a1) {
this._context.moveTo(a0, a1);
};
Context.prototype.rect = function (a0, a1, a2, a3) {
this._context.rect(a0, a1, a2, a3);
};
Context.prototype.putImageData = function (a0, a1, a2) {
this._context.putImageData(a0, a1, a2);
};
Context.prototype.quadraticCurveTo = function (a0, a1, a2, a3) {
this._context.quadraticCurveTo(a0, a1, a2, a3);
};
Context.prototype.restore = function () {
this._context.restore();
};
Context.prototype.rotate = function (a0) {
this._context.rotate(a0);
};
Context.prototype.save = function () {
this._context.save();
};
Context.prototype.scale = function (a0, a1) {
this._context.scale(a0, a1);
};
Context.prototype.setLineDash = function (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;
}
};
Context.prototype.getLineDash = function () {
return this._context.getLineDash();
};
Context.prototype.setTransform = function (a0, a1, a2, a3, a4, a5) {
this._context.setTransform(a0, a1, a2, a3, a4, a5);
};
Context.prototype.stroke = function () {
this._context.stroke();
};
Context.prototype.strokeText = function (a0, a1, a2, a3) {
this._context.strokeText(a0, a1, a2, a3);
};
Context.prototype.transform = function (a0, a1, a2, a3, a4, a5) {
this._context.transform(a0, a1, a2, a3, a4, a5);
};
Context.prototype.translate = function (a0, a1) {
this._context.translate(a0, a1);
};
Context.prototype._enableTrace = function () {
var that = this, len = CONTEXT_METHODS.length, _simplifyArray = Util_1.Util._simplifyArray, 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
});
};
};
Context.prototype._applyGlobalCompositeOperation = function (node) {
var globalCompositeOperation = node.getGlobalCompositeOperation();
if (globalCompositeOperation !== 'source-over') {
this.setAttr('globalCompositeOperation', globalCompositeOperation);
}
};
return Context;
}());
exports.Context = Context;
CONTEXT_PROPERTIES.forEach(function (prop) {
Object.defineProperty(Context.prototype, prop, {
get: function () {
return this._context[prop];
},
set: function (val) {
this._context[prop] = val;
}
});
});
var SceneContext = (function (_super) {
__extends(SceneContext, _super);
function SceneContext() {
return _super !== null && _super.apply(this, arguments) || this;
}
SceneContext.prototype._fillColor = function (shape) {
var fill = shape.fill();
this.setAttr('fillStyle', fill);
shape._fillFunc(this);
};
SceneContext.prototype._fillPattern = function (shape) {
var fillPatternX = shape.getFillPatternX(), fillPatternY = shape.getFillPatternY(), fillPatternScaleX = shape.getFillPatternScaleX(), fillPatternScaleY = shape.getFillPatternScaleY(), fillPatternRotation = Global_1.Konva.getAngle(shape.getFillPatternRotation()), fillPatternOffsetX = shape.getFillPatternOffsetX(), fillPatternOffsetY = shape.getFillPatternOffsetY();
if (fillPatternX || fillPatternY) {
this.translate(fillPatternX || 0, fillPatternY || 0);
}
if (fillPatternRotation) {
this.rotate(fillPatternRotation);
}
if (fillPatternScaleX || fillPatternScaleY) {
this.scale(fillPatternScaleX, fillPatternScaleY);
}
if (fillPatternOffsetX || fillPatternOffsetY) {
this.translate(-1 * fillPatternOffsetX, -1 * fillPatternOffsetY);
}
this.setAttr('fillStyle', shape._getFillPattern());
shape._fillFunc(this);
};
SceneContext.prototype._fillLinearGradient = function (shape) {
var grd = shape._getLinearGradient();
if (grd) {
this.setAttr('fillStyle', grd);
shape._fillFunc(this);
}
};
SceneContext.prototype._fillRadialGradient = function (shape) {
var grd = shape._getRadialGradient();
if (grd) {
this.setAttr('fillStyle', grd);
shape._fillFunc(this);
}
};
SceneContext.prototype._fill = function (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);
}
};
SceneContext.prototype._strokeLinearGradient = function (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);
}
};
SceneContext.prototype._stroke = function (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();
}
}
};
SceneContext.prototype._applyShadow = function (shape) {
var util = Util_1.Util, color = util.get(shape.getShadowRGBA(), 'black'), blur = util.get(shape.getShadowBlur(), 5), offset = util.get(shape.getShadowOffset(), {
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);
};
return SceneContext;
}(Context));
exports.SceneContext = SceneContext;
var HitContext = (function (_super) {
__extends(HitContext, _super);
function HitContext() {
return _super !== null && _super.apply(this, arguments) || this;
}
HitContext.prototype._fill = function (shape) {
this.save();
this.setAttr('fillStyle', shape.colorKey);
shape._fillFuncHit(this);
this.restore();
};
HitContext.prototype._stroke = function (shape) {
if (shape.hasStroke() && shape.hitStrokeWidth()) {
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();
}
}
};
return HitContext;
}(Context));
exports.HitContext = HitContext;