mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
migrated Ellipse test to Mocha, and finished up context wrapper methods
This commit is contained in:
Eric Rowell
parent
f298267bd7
commit
7ac45b7c4c
104
src/Context.js
104
src/Context.js
@ -11,14 +11,20 @@
|
||||
'beginPath',
|
||||
'bezierCurveTo',
|
||||
'clearRect',
|
||||
'clip',
|
||||
'closePath',
|
||||
'createLinearGradient',
|
||||
'createPattern',
|
||||
'createRadialGradient',
|
||||
'fill',
|
||||
'fillText',
|
||||
'lineTo',
|
||||
'moveTo',
|
||||
'rect',
|
||||
'restore',
|
||||
'rotate',
|
||||
'save',
|
||||
'scale',
|
||||
'setTransform',
|
||||
'stroke',
|
||||
'strokeText',
|
||||
@ -154,19 +160,19 @@
|
||||
_applyLineCap: function(shape) {
|
||||
var lineCap = shape.getLineCap();
|
||||
if(lineCap) {
|
||||
this._context.lineCap = lineCap;
|
||||
this.setAttr('lineCap', lineCap);
|
||||
}
|
||||
},
|
||||
_applyOpacity: function(shape) {
|
||||
var absOpacity = shape.getAbsoluteOpacity();
|
||||
if(absOpacity !== 1) {
|
||||
this._context.globalAlpha = absOpacity;
|
||||
this.setAttr('globalAlpha', absOpacity);
|
||||
}
|
||||
},
|
||||
_applyLineJoin: function(shape) {
|
||||
var lineJoin = shape.getLineJoin();
|
||||
if(lineJoin) {
|
||||
this._context.lineJoin = lineJoin;
|
||||
this.setAttr('lineJoin', lineJoin);
|
||||
}
|
||||
},
|
||||
_applyAncestorTransforms: function(shape) {
|
||||
@ -174,8 +180,7 @@
|
||||
this.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
|
||||
},
|
||||
_clip: function(container) {
|
||||
var _context = this._context,
|
||||
clipX = container.getClipX() || 0,
|
||||
var clipX = container.getClipX() || 0,
|
||||
clipY = container.getClipY() || 0,
|
||||
clipWidth = container.getClipWidth(),
|
||||
clipHeight = container.getClipHeight();
|
||||
@ -184,7 +189,7 @@
|
||||
this._applyAncestorTransforms(container);
|
||||
this.beginPath();
|
||||
this.rect(clipX, clipY, clipWidth, clipHeight);
|
||||
_context.clip();
|
||||
this.clip();
|
||||
this.reset();
|
||||
container._drawChildren(this.getCanvas());
|
||||
this.restore();
|
||||
@ -210,9 +215,25 @@
|
||||
var a = arguments;
|
||||
this._context.clearRect(a[0], a[1], a[2], a[3]);
|
||||
},
|
||||
clip: function() {
|
||||
var a = arguments;
|
||||
this._context.clip(a[0], a[1], a[2], a[3]);
|
||||
},
|
||||
closePath: function() {
|
||||
this._context.closePath();
|
||||
},
|
||||
createLinearGradient: function() {
|
||||
var a = arguments;
|
||||
return this._context.createLinearGradient(a[0], a[1], a[2], a[3]);
|
||||
},
|
||||
createPattern: function() {
|
||||
var a = arguments;
|
||||
this._context.createPattern(a[0], a[1]);
|
||||
},
|
||||
createRadialGradient: function() {
|
||||
var a = arguments;
|
||||
return this._context.createRadialGradient(a[0], a[1], a[2], a[3], a[4], a[5]);
|
||||
},
|
||||
fill: function() {
|
||||
this._context.fill();
|
||||
},
|
||||
@ -235,9 +256,17 @@
|
||||
restore: function() {
|
||||
this._context.restore();
|
||||
},
|
||||
rotate: function() {
|
||||
var a = arguments;
|
||||
this._context.rotate(a[0]);
|
||||
},
|
||||
save: function() {
|
||||
this._context.save();
|
||||
},
|
||||
scale: function() {
|
||||
var a = arguments;
|
||||
this._context.scale(a[0], a[1]);
|
||||
},
|
||||
setTransform: function() {
|
||||
var a = arguments;
|
||||
this._context.setTransform(a[0], a[1], a[2], a[3], a[4], a[5]);
|
||||
@ -267,11 +296,14 @@
|
||||
// methods
|
||||
for (n=0; n<len; n++) {
|
||||
(function(methodName) {
|
||||
var origMethod = that[methodName];
|
||||
var origMethod = that[methodName],
|
||||
ret;
|
||||
|
||||
that[methodName] = function() {
|
||||
args = _roundArrValues(Array.prototype.slice.call(arguments, 0));
|
||||
origMethod.apply(that, arguments);
|
||||
ret = origMethod.apply(that, arguments);
|
||||
that._trace(methodName + OPEN_PAREN + args.join(COMMA) + CLOSE_PAREN);
|
||||
return ret;
|
||||
};
|
||||
})(CONTEXT_METHODS[n]);
|
||||
}
|
||||
@ -296,8 +328,7 @@
|
||||
shape._fillFunc(this);
|
||||
},
|
||||
_fillPattern: function(shape) {
|
||||
var _context = this._context,
|
||||
fillPatternImage = shape.getFillPatternImage(),
|
||||
var fillPatternImage = shape.getFillPatternImage(),
|
||||
fillPatternX = shape.getFillPatternX(),
|
||||
fillPatternY = shape.getFillPatternY(),
|
||||
fillPatternScale = shape.getFillPatternScale(),
|
||||
@ -309,24 +340,23 @@
|
||||
this.translate(fillPatternX || 0, fillPatternY || 0);
|
||||
}
|
||||
if(fillPatternRotation) {
|
||||
_context.rotate(fillPatternRotation);
|
||||
this.rotate(fillPatternRotation);
|
||||
}
|
||||
if(fillPatternScale) {
|
||||
_context.scale(fillPatternScale.x, fillPatternScale.y);
|
||||
this.scale(fillPatternScale.x, fillPatternScale.y);
|
||||
}
|
||||
if(fillPatternOffset) {
|
||||
this.translate(-1 * fillPatternOffset.x, -1 * fillPatternOffset.y);
|
||||
}
|
||||
|
||||
this.setAttr('fillStyle', _context.createPattern(fillPatternImage, fillPatternRepeat || 'repeat'));
|
||||
this.setAttr('fillStyle', this.createPattern(fillPatternImage, fillPatternRepeat || 'repeat'));
|
||||
this.fill();
|
||||
},
|
||||
_fillLinearGradient: function(shape) {
|
||||
var _context = this._context,
|
||||
start = shape.getFillLinearGradientStartPoint(),
|
||||
var start = shape.getFillLinearGradientStartPoint(),
|
||||
end = shape.getFillLinearGradientEndPoint(),
|
||||
colorStops = shape.getFillLinearGradientColorStops(),
|
||||
grd = _context.createLinearGradient(start.x, start.y, end.x, end.y);
|
||||
grd = this.createLinearGradient(start.x, start.y, end.x, end.y);
|
||||
|
||||
if (colorStops) {
|
||||
// build color stops
|
||||
@ -338,13 +368,12 @@
|
||||
}
|
||||
},
|
||||
_fillRadialGradient: function(shape) {
|
||||
var _context = this._context,
|
||||
start = shape.getFillRadialGradientStartPoint(),
|
||||
var start = shape.getFillRadialGradientStartPoint(),
|
||||
end = shape.getFillRadialGradientEndPoint(),
|
||||
startRadius = shape.getFillRadialGradientStartRadius(),
|
||||
endRadius = shape.getFillRadialGradientEndRadius(),
|
||||
colorStops = shape.getFillRadialGradientColorStops(),
|
||||
grd = _context.createRadialGradient(start.x, start.y, startRadius, end.x, end.y, endRadius);
|
||||
grd = this.createRadialGradient(start.x, start.y, startRadius, end.x, end.y, endRadius);
|
||||
|
||||
// build color stops
|
||||
for(var n = 0; n < colorStops.length; n += 2) {
|
||||
@ -354,16 +383,14 @@
|
||||
this.fill();
|
||||
},
|
||||
_fill: function(shape, skipShadow) {
|
||||
var _context = this._context,
|
||||
hasColor = shape.getFill(),
|
||||
var hasColor = shape.getFill(),
|
||||
hasPattern = shape.getFillPatternImage(),
|
||||
hasLinearGradient = shape.getFillLinearGradientColorStops(),
|
||||
hasRadialGradient = shape.getFillRadialGradientColorStops(),
|
||||
fillPriority = shape.getFillPriority();
|
||||
|
||||
this.save();
|
||||
|
||||
if(!skipShadow && shape.hasShadow()) {
|
||||
this.save();
|
||||
this._applyShadow(shape);
|
||||
}
|
||||
|
||||
@ -393,9 +420,9 @@
|
||||
else if(hasRadialGradient) {
|
||||
this._fillRadialGradient(shape);
|
||||
}
|
||||
this.restore();
|
||||
|
||||
|
||||
if(!skipShadow && shape.hasShadow()) {
|
||||
this.restore();
|
||||
this._fill(shape, true);
|
||||
}
|
||||
},
|
||||
@ -406,8 +433,8 @@
|
||||
dashArray = shape.getDashArray();
|
||||
|
||||
if(stroke || strokeWidth) {
|
||||
this.save();
|
||||
if (!shape.getStrokeScaleEnabled()) {
|
||||
this.save();
|
||||
this.setTransform(1, 0, 0, 1, 0, 0);
|
||||
}
|
||||
this._applyLineCap(shape);
|
||||
@ -428,16 +455,15 @@
|
||||
this.setAttr('lineWidth', strokeWidth || 2);
|
||||
this.setAttr('strokeStyle', stroke || 'black');
|
||||
shape._strokeFunc(this);
|
||||
this.restore();
|
||||
|
||||
|
||||
if(!skipShadow && shape.hasShadow()) {
|
||||
this.restore();
|
||||
this._stroke(shape, true);
|
||||
}
|
||||
}
|
||||
},
|
||||
_applyShadow: function(shape) {
|
||||
var _context = this._context,
|
||||
util, absOpacity, color, blur, offset, shadowOpacity;
|
||||
var util, absOpacity, color, blur, offset, shadowOpacity;
|
||||
|
||||
if(shape.hasShadow() && shape.getShadowEnabled()) {
|
||||
util = Kinetic.Util;
|
||||
@ -451,13 +477,13 @@
|
||||
});
|
||||
|
||||
if(shadowOpacity) {
|
||||
_context.globalAlpha = shadowOpacity * absOpacity;
|
||||
this.setAttr('globalAlpha', shadowOpacity * absOpacity);
|
||||
}
|
||||
|
||||
_context.shadowColor = color;
|
||||
_context.shadowBlur = blur;
|
||||
_context.shadowOffsetX = offset.x;
|
||||
_context.shadowOffsetY = offset.y;
|
||||
this.setAttr('shadowColor', color);
|
||||
this.setAttr('shadowBlur', blur);
|
||||
this.setAttr('shadowOffsetX', offset.x);
|
||||
this.setAttr('shadowOffsetY', offset.y);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -469,21 +495,19 @@
|
||||
|
||||
Kinetic.HitContext.prototype = {
|
||||
_fill: function(shape) {
|
||||
var _context = this._context;
|
||||
this.save();
|
||||
this.setAttr('fillStyle', shape.colorKey);
|
||||
shape._fillFuncHit(this);
|
||||
this.restore();
|
||||
},
|
||||
_stroke: function(shape) {
|
||||
var _context = this._context,
|
||||
stroke = shape.getStroke(),
|
||||
var stroke = shape.getStroke(),
|
||||
strokeWidth = shape.getStrokeWidth();
|
||||
|
||||
if(stroke || strokeWidth) {
|
||||
this._applyLineCap(shape);
|
||||
_context.lineWidth = strokeWidth || 2;
|
||||
_context.strokeStyle = shape.colorKey;
|
||||
this.setAttr('lineWidth', strokeWidth || 2);
|
||||
this.setAttr('strokeStyle', shape.colorKey);
|
||||
shape._strokeFuncHit(this);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1009,16 +1009,16 @@
|
||||
height: config.height || stage.getHeight(),
|
||||
pixelRatio: 1
|
||||
}),
|
||||
_context = canvas.getContext()._context;
|
||||
context = canvas.getContext();
|
||||
|
||||
_context.save();
|
||||
context.save();
|
||||
|
||||
if(x || y) {
|
||||
_context.translate(-1 * x, -1 * y);
|
||||
context.translate(-1 * x, -1 * y);
|
||||
}
|
||||
|
||||
this.drawScene(canvas);
|
||||
_context.restore();
|
||||
context.restore();
|
||||
|
||||
return canvas.toDataURL(mimeType, quality);
|
||||
},
|
||||
|
||||
@ -26,14 +26,14 @@
|
||||
var _context = context._context,
|
||||
r = this.getRadius();
|
||||
|
||||
_context.beginPath();
|
||||
_context.save();
|
||||
context.beginPath();
|
||||
context.save();
|
||||
if(r.x !== r.y) {
|
||||
_context.scale(1, r.y / r.x);
|
||||
context.scale(1, r.y / r.x);
|
||||
}
|
||||
_context.arc(0, 0, r.x, 0, PIx2, false);
|
||||
_context.restore();
|
||||
_context.closePath();
|
||||
context.arc(0, 0, r.x, 0, PIx2, false);
|
||||
context.restore();
|
||||
context.closePath();
|
||||
context.fillStrokeShape(this);
|
||||
},
|
||||
getWidth: function() {
|
||||
|
||||
@ -30,6 +30,7 @@
|
||||
<script src="unit/Circle-test.js"></script>
|
||||
<script src="unit/Text-test.js"></script>
|
||||
<script src="unit/Blob-test.js"></script>
|
||||
<script src="unit/Ellipse-test.js"></script>
|
||||
<script>
|
||||
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
|
||||
else { mocha.run(); }
|
||||
|
||||
@ -42,7 +42,7 @@ suite('Circle', function(){
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
//console.log(trace);
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();save();fillStyle=green;fill();restore();save();lineWidth=4;strokeStyle=black;stroke();restore();restore()');
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore()');
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
|
||||
26
test/unit/Ellipse-test.js
Normal file
26
test/unit/Ellipse-test.js
Normal file
@ -0,0 +1,26 @@
|
||||
suite('Ellipse', function(){
|
||||
|
||||
// ======================================================
|
||||
test('add ellipse', function(){
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var ellipse = new Kinetic.Ellipse({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: [70, 35],
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 8
|
||||
});
|
||||
layer.add(ellipse);
|
||||
stage.add(layer);
|
||||
assert.equal(ellipse.getClassName(), 'Ellipse');
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();save();scale(1,0.5);arc(0,0,70,0,6.283,false);restore();closePath();fillStyle=green;fill();lineWidth=8;strokeStyle=black;stroke();restore()');
|
||||
});
|
||||
});
|
||||
@ -27,7 +27,7 @@ suite('Rect', function(){
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
//console.log(trace);
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();rect(0,0,100,50);closePath();save();fillStyle=green;fill();restore();save();lineWidth=2;strokeStyle=blue;stroke();restore();restore()');
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=2;strokeStyle=blue;stroke();restore()');
|
||||
|
||||
});
|
||||
|
||||
@ -69,8 +69,8 @@ suite('Rect', function(){
|
||||
assert.equal(rect.getCornerRadius(), 5);
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
//console.log(trace);
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();moveTo(5,0);lineTo(95,0);arc(95,5,5,4.712,0,false);lineTo(100,45);arc(95,45,5,0,1.571,false);lineTo(5,50);arc(5,45,5,1.571,3.142,false);lineTo(0,5);arc(5,5,5,3.142,4.712,false);closePath();save();fillStyle=green;fill();restore();save();fillStyle=green;fill();restore();save();lineWidth=2;strokeStyle=blue;stroke();restore();restore()');
|
||||
//console.log(layer.getContext().traceArr);
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();globalAlpha=0.4;transform(1,0,0,1,100,50);beginPath();moveTo(5,0);lineTo(95,0);arc(95,5,5,4.712,0,false);lineTo(100,45);arc(95,45,5,0,1.571,false);lineTo(5,50);arc(5,45,5,1.571,3.142,false);lineTo(0,5);arc(5,5,5,3.142,4.712,false);closePath();save();globalAlpha=0.2;shadowColor=red;shadowBlur=10;shadowOffsetX=5;shadowOffsetY=5;fillStyle=green;fill();restore();fillStyle=green;fill();lineWidth=2;strokeStyle=blue;stroke();restore()');
|
||||
|
||||
});
|
||||
|
||||
|
||||
@ -252,7 +252,7 @@ suite('Text', function(){
|
||||
layer.add(text);
|
||||
stage.add(layer);
|
||||
|
||||
console.log(layer.getContext().getTrace());
|
||||
//console.log(layer.getContext().getTrace());
|
||||
|
||||
});
|
||||
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
Test.Modules.ELLIPSE = {
|
||||
'add ellipse': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var ellipse = new Kinetic.Ellipse({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: [70, 35],
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 8
|
||||
});
|
||||
layer.add(ellipse);
|
||||
stage.add(layer);
|
||||
test(ellipse.getClassName() === 'Ellipse', 'shape type should be Ellipse');
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user