lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

clean up

Browse Source
This commit is contained in:
Anton Lavrenov 2018-03-10 10:44:36 +07:00
parent 38d7ddeaae
commit 2944158479
4 changed files with 139 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
konva.js
View File

@ -1512,11 +1512,11 @@
];
/**
* Canvas Context constructor
* @constructor
* @abstract
* @memberof Konva
*/
* Canvas Context constructor
* @constructor
* @abstract
* @memberof Konva
*/
Konva.Context = function(canvas) {
this.init(canvas);
};
@ -1532,33 +1532,33 @@
}
},
/**
* fill shape
* @method
* @memberof Konva.Context.prototype
* @param {Konva.Shape} shape
*/
* fill shape
* @method
* @memberof Konva.Context.prototype
* @param {Konva.Shape} shape
*/
fillShape: function(shape) {
if (shape.getFillEnabled()) {
this._fill(shape);
}
},
/**
* stroke shape
* @method
* @memberof Konva.Context.prototype
* @param {Konva.Shape} shape
*/
* stroke shape
* @method
* @memberof Konva.Context.prototype
* @param {Konva.Shape} shape
*/
strokeShape: function(shape) {
if (shape.getStrokeEnabled()) {
this._stroke(shape);
}
},
/**
* fill then stroke
* @method
* @memberof Konva.Context.prototype
* @param {Konva.Shape} shape
*/
* fill then stroke
* @method
* @memberof Konva.Context.prototype
* @param {Konva.Shape} shape
*/
fillStrokeShape: function(shape) {
var fillEnabled = shape.getFillEnabled();
if (fillEnabled) {
@ -1569,14 +1569,14 @@
}
},
/**
* get context trace if trace is enabled
* @method
* @memberof Konva.Context.prototype
* @param {Boolean} relaxed if false, return strict context trace, which includes method names, method parameters
* properties, and property values. If true, return relaxed context trace, which only returns method names and
* properites.
* @returns {String}
*/
* get context trace if trace is enabled
* @method
* @memberof Konva.Context.prototype
* @param {Boolean} relaxed if false, return strict context trace, which includes method names, method parameters
* properties, and property values. If true, return relaxed context trace, which only returns method names and
* properites.
* @returns {String}
*/
getTrace: function(relaxed) {
var traceArr = this.traceArr,
len = traceArr.length,
@ -1618,15 +1618,16 @@
return str;
},
/**
* clear trace if trace is enabled
* @method
* @memberof Konva.Context.prototype
*/
* clear trace if trace is enabled
* @method
* @memberof Konva.Context.prototype
*/
clearTrace: function() {
this.traceArr = [];
},
_trace: function(str) {
var traceArr = this.traceArr, len;
var traceArr = this.traceArr,
len;
traceArr.push(str);
len = traceArr.length;
@ -1636,33 +1637,33 @@
}
},
/**
* reset canvas context transform
* @method
* @memberof Konva.Context.prototype
*/
* reset canvas context transform
* @method
* @memberof Konva.Context.prototype
*/
reset: function() {
var pixelRatio = this.getCanvas().getPixelRatio();
this.setTransform(1 * pixelRatio, 0, 0, 1 * pixelRatio, 0, 0);
},
/**
* get canvas
* @method
* @memberof Konva.Context.prototype
* @returns {Konva.Canvas}
*/
* get canvas
* @method
* @memberof Konva.Context.prototype
* @returns {Konva.Canvas}
*/
getCanvas: function() {
return this.canvas;
},
/**
* clear canvas
* @method
* @memberof Konva.Context.prototype
* @param {Object} [bounds]
* @param {Number} [bounds.x]
* @param {Number} [bounds.y]
* @param {Number} [bounds.width]
* @param {Number} [bounds.height]
*/
* clear canvas
* @method
* @memberof Konva.Context.prototype
* @param {Object} [bounds]
* @param {Number} [bounds.x]
* @param {Number} [bounds.y]
* @param {Number} [bounds.width]
* @param {Number} [bounds.height]
*/
clear: function(bounds) {
var canvas = this.getCanvas();
@ -1754,7 +1755,8 @@
);
},
drawImage: function() {
var a = arguments, _context = this._context;
var a = arguments,
_context = this._context;
if (a.length === 3) {
_context.drawImage(a[0], a[1], a[2]);
@ -1832,7 +1834,8 @@
this._context.scale(a[0], a[1]);
},
setLineDash: function() {
var a = arguments, _context = this._context;
var a = arguments,
_context = this._context;
// works for Chrome and IE11
if (this._context.setLineDash) {
@ -1879,7 +1882,8 @@
// to prevent creating scope function at each loop
var func = function(methodName) {
var origMethod = that[methodName], ret;
var origMethod = that[methodName],
ret;
that[methodName] = function() {
args = _simplifyArray(Array.prototype.slice.call(arguments, 0));
@ -2066,15 +2070,18 @@
}
this.setAttr('lineWidth', shape.strokeWidth());
this.setAttr('strokeStyle', shape.stroke());
if (!shape.getShadowForStrokeEnabled()) {
this.setAttr('shadowColor', 'rgba(0,0,0,0)');
}
// TODO - do we need to make like a fill function?
var hasLinearGradient = shape.getStrokeLinearGradientColorStops();
if (hasLinearGradient) {
this._strokeLinearGradient(shape);
} else {
this.setAttr('strokeStyle', shape.stroke());
}
shape._strokeFunc(this);

2
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

117
src/Context.js
View File

@ -63,11 +63,11 @@
];
/**
* Canvas Context constructor
* @constructor
* @abstract
* @memberof Konva
*/
* Canvas Context constructor
* @constructor
* @abstract
* @memberof Konva
*/
Konva.Context = function(canvas) {
this.init(canvas);
};
@ -83,33 +83,33 @@
}
},
/**
* fill shape
* @method
* @memberof Konva.Context.prototype
* @param {Konva.Shape} shape
*/
* fill shape
* @method
* @memberof Konva.Context.prototype
* @param {Konva.Shape} shape
*/
fillShape: function(shape) {
if (shape.getFillEnabled()) {
this._fill(shape);
}
},
/**
* stroke shape
* @method
* @memberof Konva.Context.prototype
* @param {Konva.Shape} shape
*/
* stroke shape
* @method
* @memberof Konva.Context.prototype
* @param {Konva.Shape} shape
*/
strokeShape: function(shape) {
if (shape.getStrokeEnabled()) {
this._stroke(shape);
}
},
/**
* fill then stroke
* @method
* @memberof Konva.Context.prototype
* @param {Konva.Shape} shape
*/
* fill then stroke
* @method
* @memberof Konva.Context.prototype
* @param {Konva.Shape} shape
*/
fillStrokeShape: function(shape) {
var fillEnabled = shape.getFillEnabled();
if (fillEnabled) {
@ -120,14 +120,14 @@
}
},
/**
* get context trace if trace is enabled
* @method
* @memberof Konva.Context.prototype
* @param {Boolean} relaxed if false, return strict context trace, which includes method names, method parameters
* properties, and property values. If true, return relaxed context trace, which only returns method names and
* properites.
* @returns {String}
*/
* get context trace if trace is enabled
* @method
* @memberof Konva.Context.prototype
* @param {Boolean} relaxed if false, return strict context trace, which includes method names, method parameters
* properties, and property values. If true, return relaxed context trace, which only returns method names and
* properites.
* @returns {String}
*/
getTrace: function(relaxed) {
var traceArr = this.traceArr,
len = traceArr.length,
@ -169,15 +169,16 @@
return str;
},
/**
* clear trace if trace is enabled
* @method
* @memberof Konva.Context.prototype
*/
* clear trace if trace is enabled
* @method
* @memberof Konva.Context.prototype
*/
clearTrace: function() {
this.traceArr = [];
},
_trace: function(str) {
var traceArr = this.traceArr, len;
var traceArr = this.traceArr,
len;
traceArr.push(str);
len = traceArr.length;
@ -187,33 +188,33 @@
}
},
/**
* reset canvas context transform
* @method
* @memberof Konva.Context.prototype
*/
* reset canvas context transform
* @method
* @memberof Konva.Context.prototype
*/
reset: function() {
var pixelRatio = this.getCanvas().getPixelRatio();
this.setTransform(1 * pixelRatio, 0, 0, 1 * pixelRatio, 0, 0);
},
/**
* get canvas
* @method
* @memberof Konva.Context.prototype
* @returns {Konva.Canvas}
*/
* get canvas
* @method
* @memberof Konva.Context.prototype
* @returns {Konva.Canvas}
*/
getCanvas: function() {
return this.canvas;
},
/**
* clear canvas
* @method
* @memberof Konva.Context.prototype
* @param {Object} [bounds]
* @param {Number} [bounds.x]
* @param {Number} [bounds.y]
* @param {Number} [bounds.width]
* @param {Number} [bounds.height]
*/
* clear canvas
* @method
* @memberof Konva.Context.prototype
* @param {Object} [bounds]
* @param {Number} [bounds.x]
* @param {Number} [bounds.y]
* @param {Number} [bounds.width]
* @param {Number} [bounds.height]
*/
clear: function(bounds) {
var canvas = this.getCanvas();
@ -305,7 +306,8 @@
);
},
drawImage: function() {
var a = arguments, _context = this._context;
var a = arguments,
_context = this._context;
if (a.length === 3) {
_context.drawImage(a[0], a[1], a[2]);
@ -383,7 +385,8 @@
this._context.scale(a[0], a[1]);
},
setLineDash: function() {
var a = arguments, _context = this._context;
var a = arguments,
_context = this._context;
// works for Chrome and IE11
if (this._context.setLineDash) {
@ -430,7 +433,8 @@
// to prevent creating scope function at each loop
var func = function(methodName) {
var origMethod = that[methodName], ret;
var origMethod = that[methodName],
ret;
that[methodName] = function() {
args = _simplifyArray(Array.prototype.slice.call(arguments, 0));
@ -617,15 +621,18 @@
}
this.setAttr('lineWidth', shape.strokeWidth());
this.setAttr('strokeStyle', shape.stroke());
if (!shape.getShadowForStrokeEnabled()) {
this.setAttr('shadowColor', 'rgba(0,0,0,0)');
}
// TODO - do we need to make like a fill function?
var hasLinearGradient = shape.getStrokeLinearGradientColorStops();
if (hasLinearGradient) {
this._strokeLinearGradient(shape);
} else {
this.setAttr('strokeStyle', shape.stroke());
}
shape._strokeFunc(this);

22
test/unit/Shape-test.js
View File

@ -341,12 +341,13 @@ suite('Shape', function() {
test('stroke gradient', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var layer = new Konva.Layer({
scaleY: 1.5
});
var shape = new Konva.Rect({
x: 50,
y: 50,
x: 10,
y: 10,
width: 100,
height: 100,
fillLinearGradientColorStops: [0, 'yellow', 0.5, 'red', 1, 'white'],
@ -370,8 +371,14 @@ suite('Shape', function() {
}
});
layer.add(shape);
stage.add(layer);
layer.draw();
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(3,0,0,1.5,10,15);beginPath();rect(0,0,100,100);closePath();createLinearGradient(0,0,100,100);fillStyle=[object CanvasGradient];fill();lineWidth=2;createLinearGradient(0,0,100,100);strokeStyle=[object CanvasGradient];stroke();restore();'
);
});
// ======================================================
@ -1280,16 +1287,15 @@ suite('Shape', function() {
context.lineWidth = 10;
context.fill();
context.shadowColor = 'rgba(0,0,0, 0)';
context.shadowColor = 'rgba(0,0,0,0)';
context.stroke();
compareLayerAndCanvas(layer, canvas, 10);
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();shadowColor=rgba(128,128,128,1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;strokeStyle=black;shadowColor=rgba(0,0,0,0);stroke();restore();restore();'
'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();shadowColor=rgba(128,128,128,1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;shadowColor=rgba(0,0,0,0);strokeStyle=black;stroke();restore();restore();'
);
});