mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 15:53:42 +08:00
better capable konva context with native context
This commit is contained in:
lavrton
parent
a554f4e979
commit
18cce13ea5
@ -7,6 +7,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
|
||||
### Fixed
|
||||
- `to` don't throw error if no `onFinish` callback
|
||||
|
||||
### Changed
|
||||
- context wrapper is more capable with native context.
|
||||
So you can use `context.fillStyle` in your `sceneFunc` without accessing native context.
|
||||
|
||||
|
||||
## [0.9.0][2015-02-27]
|
||||
|
||||
|
||||
@ -42,6 +42,10 @@
|
||||
'translate'
|
||||
];
|
||||
|
||||
var CONTEXT_PROPERTIES = ['fillStyle', 'strokeStyle', 'shadowColor', 'shadowBlur', 'shadowOffsetX',
|
||||
'shadowOffsetY', 'lineCap', 'lineJoin', 'lineWidth', 'miterLimit', 'font', 'textAlign', 'textBaseline',
|
||||
'globalAlpha', 'globalCompositeOperation'];
|
||||
|
||||
/**
|
||||
* Canvas Context constructor
|
||||
* @constructor
|
||||
@ -283,13 +287,25 @@
|
||||
_context.drawImage(a[0], a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8]);
|
||||
}
|
||||
},
|
||||
isPointInPath: function(x, y) {
|
||||
return this._context.isPointInPath(x, y);
|
||||
},
|
||||
fill: function() {
|
||||
this._context.fill();
|
||||
},
|
||||
fillRect: function(x, y, width, height) {
|
||||
this._context.fillRect(x, y, width, height);
|
||||
},
|
||||
strokeRect: function(x, y, width, height) {
|
||||
this._context.strokeRect(x, y, width, height);
|
||||
},
|
||||
fillText: function() {
|
||||
var a = arguments;
|
||||
this._context.fillText(a[0], a[1], a[2]);
|
||||
},
|
||||
measureText: function(text) {
|
||||
return this._context.measureText(text);
|
||||
},
|
||||
getImageData: function() {
|
||||
var a = arguments;
|
||||
return this._context.getImageData(a[0], a[1], a[2], a[3]);
|
||||
@ -347,6 +363,9 @@
|
||||
|
||||
// no support for IE9 and IE10
|
||||
},
|
||||
getLineDash: function() {
|
||||
return this._context.getLineDash();
|
||||
},
|
||||
setTransform: function() {
|
||||
var a = arguments;
|
||||
this._context.setTransform(a[0], a[1], a[2], a[3], a[4], a[5]);
|
||||
@ -410,6 +429,17 @@
|
||||
}
|
||||
};
|
||||
|
||||
CONTEXT_PROPERTIES.forEach(function(prop) {
|
||||
Object.defineProperty(Konva.Context.prototype, prop, {
|
||||
get : function () {
|
||||
return this._context[prop];
|
||||
},
|
||||
set : function (val) {
|
||||
return this._context[prop] = val;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Konva.SceneContext = function(canvas) {
|
||||
Konva.Context.call(this, canvas);
|
||||
};
|
||||
|
||||
118
test/runner.html
118
test/runner.html
@ -33,65 +33,68 @@
|
||||
<script src="lib/stats.js"></script>
|
||||
|
||||
<!--<script src="lib/blanket.js"></script>-->
|
||||
<!--// core-->
|
||||
<!--<script src="../src/Global.js" data-cover></script>-->
|
||||
<!--<script src="../src/Util.js" data-cover></script>-->
|
||||
<!--<script src="../src/Canvas.js" data-cover></script>-->
|
||||
<!--<script src="../src/Context.js" data-cover></script>-->
|
||||
<!--<script src="../src/Factory.js" data-cover></script>-->
|
||||
<!--<script src="../src/Node.js" data-cover></script>-->
|
||||
|
||||
<!--// filters-->
|
||||
<!--<script src="../src/filters/Grayscale.js" data-cover></script>-->
|
||||
<!--<script src="../src/filters/Brighten.js" data-cover></script>-->
|
||||
<!--<script src="../src/filters/Invert.js" data-cover></script>-->
|
||||
<!--<script src="../src/filters/Blur.js" data-cover></script>-->
|
||||
<!--<script src="../src/filters/Mask.js" data-cover></script>-->
|
||||
<!--<script src="../src/filters/RGB.js" data-cover></script>-->
|
||||
<!--<script src="../src/filters/HSV.js" data-cover></script>-->
|
||||
<!--<script src="../src/filters/HSL.js" data-cover></script>-->
|
||||
<!--<script src="../src/filters/Emboss.js" data-cover></script>-->
|
||||
<!--<script src="../src/filters/Enhance.js" data-cover></script>-->
|
||||
<!--<script src="../src/filters/Posterize.js" data-cover></script>-->
|
||||
<!--<script src="../src/filters/Noise.js" data-cover></script>-->
|
||||
<!--<script src="../src/filters/Pixelate.js" data-cover></script>-->
|
||||
<!--<script src="../src/filters/Threshold.js" data-cover></script>-->
|
||||
<!--<script src="../src/filters/Sepia.js" data-cover></script>-->
|
||||
<!--<script src="../src/filters/Solarize.js" data-cover></script>-->
|
||||
<!--<script src="../src/filters/Kaleidoscope.js" data-cover></script>-->
|
||||
<!--CORE-->
|
||||
<script src="../src/Global.js" data-cover></script>
|
||||
<script src="../src/Util.js" data-cover></script>
|
||||
<script src="../src/Canvas.js" data-cover></script>
|
||||
<script src="../src/Context.js" data-cover></script>
|
||||
<script src="../src/Factory.js" data-cover></script>
|
||||
<script src="../src/Node.js" data-cover></script>
|
||||
|
||||
<!--// core-->
|
||||
<!--<script src="../src/Animation.js" data-cover></script>-->
|
||||
<!--<script src="../src/Tween.js" data-cover></script>-->
|
||||
<!--<script src="../src/DragAndDrop.js" data-cover></script>-->
|
||||
<!--<script src="../src/Container.js" data-cover></script>-->
|
||||
<!--<script src="../src/Shape.js" data-cover></script>-->
|
||||
<!--<script src="../src/Stage.js" data-cover></script>-->
|
||||
<!--<script src="../src/BaseLayer.js" data-cover></script>-->
|
||||
<!--<script src="../src/Layer.js" data-cover></script>-->
|
||||
<!--<script src="../src/FastLayer.js" data-cover></script>-->
|
||||
<!--<script src="../src/Group.js" data-cover></script>-->
|
||||
<!--FILTERS-->
|
||||
<script src="../src/filters/Grayscale.js" data-cover></script>
|
||||
<script src="../src/filters/Brighten.js" data-cover></script>
|
||||
<script src="../src/filters/Invert.js" data-cover></script>
|
||||
<script src="../src/filters/Blur.js" data-cover></script>
|
||||
<script src="../src/filters/Mask.js" data-cover></script>
|
||||
<script src="../src/filters/RGB.js" data-cover></script>
|
||||
<script src="../src/filters/HSV.js" data-cover></script>
|
||||
<script src="../src/filters/HSL.js" data-cover></script>
|
||||
<script src="../src/filters/Emboss.js" data-cover></script>
|
||||
<script src="../src/filters/Enhance.js" data-cover></script>
|
||||
<script src="../src/filters/Posterize.js" data-cover></script>
|
||||
<script src="../src/filters/Noise.js" data-cover></script>
|
||||
<script src="../src/filters/Pixelate.js" data-cover></script>
|
||||
<script src="../src/filters/Threshold.js" data-cover></script>
|
||||
<script src="../src/filters/Sepia.js" data-cover></script>
|
||||
<script src="../src/filters/Solarize.js" data-cover></script>
|
||||
<script src="../src/filters/Kaleidoscope.js" data-cover></script>
|
||||
|
||||
<!--// shapes-->
|
||||
<!--<script src="../src/shapes/Rect.js" data-cover></script>-->
|
||||
<!--<script src="../src/shapes/Circle.js" data-cover></script>-->
|
||||
<!--<script src="../src/shapes/Ellipse.js" data-cover></script>-->
|
||||
<!--<script src="../src/shapes/Ring.js" data-cover></script>-->
|
||||
<!--<script src="../src/shapes/Wedge.js" data-cover></script>-->
|
||||
<!--<script src="../src/shapes/Arc.js" data-cover></script>-->
|
||||
<!--<script src="../src/shapes/Image.js" data-cover></script>-->
|
||||
<!--<script src="../src/shapes/Text.js" data-cover></script>-->
|
||||
<!--<script src="../src/shapes/Line.js" data-cover></script>-->
|
||||
<!--<script src="../src/shapes/Sprite.js" data-cover></script>-->
|
||||
<!--MAIN ELEMENTS-->
|
||||
|
||||
<!--// plugins-->
|
||||
<!--<script src="../src/plugins/Path.js" data-cover></script>-->
|
||||
<!--<script src="../src/plugins/TextPath.js" data-cover></script>-->
|
||||
<!--<script src="../src/plugins/RegularPolygon.js" data-cover></script>-->
|
||||
<!--<script src="../src/plugins/Star.js" data-cover></script>-->
|
||||
<!--<script src="../src/plugins/Label.js" data-cover></script>-->
|
||||
<!--<script src="../src/plugins/Arrow.js" data-cover></script>-->
|
||||
<script src="../dist/konva-dev.js"></script>
|
||||
<script src="../src/Container.js" data-cover></script>
|
||||
<script src="../src/Shape.js" data-cover></script>
|
||||
<script src="../src/Stage.js" data-cover></script>
|
||||
<script src="../src/BaseLayer.js" data-cover></script>
|
||||
<script src="../src/Layer.js" data-cover></script>
|
||||
<script src="../src/FastLayer.js" data-cover></script>
|
||||
<script src="../src/Group.js" data-cover></script>
|
||||
<script src="../src/Animation.js" data-cover></script>
|
||||
<script src="../src/Tween.js" data-cover></script>
|
||||
<script src="../src/DragAndDrop.js" data-cover></script>
|
||||
|
||||
<!--SHAPES-->
|
||||
<script src="../src/shapes/Rect.js" data-cover></script>
|
||||
<script src="../src/shapes/Circle.js" data-cover></script>
|
||||
<script src="../src/shapes/Ellipse.js" data-cover></script>
|
||||
<script src="../src/shapes/Ring.js" data-cover></script>
|
||||
<script src="../src/shapes/Wedge.js" data-cover></script>
|
||||
<script src="../src/shapes/Arc.js" data-cover></script>
|
||||
<script src="../src/shapes/Image.js" data-cover></script>
|
||||
<script src="../src/shapes/Text.js" data-cover></script>
|
||||
<script src="../src/shapes/Line.js" data-cover></script>
|
||||
<script src="../src/shapes/Sprite.js" data-cover></script>
|
||||
|
||||
<!--PLUGINS-->
|
||||
<script src="../src/plugins/Path.js" data-cover></script>
|
||||
<script src="../src/plugins/TextPath.js" data-cover></script>
|
||||
<script src="../src/plugins/RegularPolygon.js" data-cover></script>
|
||||
<script src="../src/plugins/Star.js" data-cover></script>
|
||||
<script src="../src/plugins/Label.js" data-cover></script>
|
||||
<script src="../src/plugins/Arrow.js" data-cover></script>
|
||||
|
||||
<!--<script src="../dist/konva-dev.js"></script>-->
|
||||
|
||||
<script src="lib/imagediff.js"></script>
|
||||
<script src="runner.js"></script>
|
||||
@ -106,6 +109,7 @@
|
||||
<script src="unit/Global-test.js"></script>
|
||||
<script src="unit/Util-test.js"></script>
|
||||
<script src="unit/Canvas-test.js"></script>
|
||||
<script src="unit/Context-test.js"></script>
|
||||
<script src="unit/Node-test.js"></script>
|
||||
<script src="unit/Node-cache-test.js"></script>
|
||||
<script src="unit/Container-test.js"></script>
|
||||
@ -170,8 +174,8 @@
|
||||
<script src="functional/TouchEvents-test.js"></script>
|
||||
<script src="functional/DragAndDropEvents-test.js"></script>
|
||||
|
||||
<!--=============== manual tests ================-->
|
||||
<script src="manual/manual-test.js"></script>
|
||||
<!--<!–=============== manual tests ================–>-->
|
||||
<!--<script src="manual/manual-test.js"></script>-->
|
||||
|
||||
<script>
|
||||
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
|
||||
|
||||
54
test/unit/Context-test.js
Normal file
54
test/unit/Context-test.js
Normal file
@ -0,0 +1,54 @@
|
||||
suite('Context', function() {
|
||||
// ======================================================
|
||||
var contextMethods = ['clearRect', 'fillRect', 'strokeRect',
|
||||
'fillText', 'strokeText', 'measureText', 'getLineDash', 'setLineDash',
|
||||
'createLinearGradient', 'createRadialGradient', 'createPattern',
|
||||
'beginPath', 'closePath', 'moveTo', 'lineTo', 'bezierCurveTo', 'quadraticCurveTo',
|
||||
'arc', 'arcTo', 'rect', 'fill', 'stroke', 'clip', 'isPointInPath',
|
||||
'scale', 'rotate', 'translate', 'transform', 'setTransform', 'drawImage',
|
||||
'createImageData', 'getImageData', 'putImageData', 'save', 'restore'];
|
||||
|
||||
var contextProperties = ['fillStyle', 'strokeStyle', 'shadowColor', 'shadowBlur', 'shadowOffsetX',
|
||||
'shadowOffsetY', 'lineCap', 'lineJoin', 'lineWidth', 'miterLimit', 'font', 'textAlign', 'textBaseline',
|
||||
'globalAlpha', 'globalCompositeOperation'];
|
||||
|
||||
test('context wrapper should work like native context', function() {
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var circle = new Konva.Circle({
|
||||
x: 100,
|
||||
y: 70,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'blue',
|
||||
strokeWidth: 4,
|
||||
draggable : true
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
var context = layer.getContext();
|
||||
var nativeContext = context._context;
|
||||
|
||||
contextMethods.forEach(function(method) {
|
||||
assert.equal(typeof nativeContext[method], 'function', 'native context has no method ' + method);
|
||||
assert.equal(typeof context[method], 'function', 'context wrapper has no method ' + method);
|
||||
});
|
||||
|
||||
contextProperties.forEach(function(prop) {
|
||||
assert.equal(nativeContext.hasOwnProperty(prop), true, 'native context has no property ' + prop);
|
||||
assert.equal(context[prop] !== undefined, true, 'context wrapper has no property ' + prop);
|
||||
});
|
||||
|
||||
// test get
|
||||
nativeContext.fillStyle = '#ff0000';
|
||||
assert.equal(context.fillStyle, '#ff0000');
|
||||
|
||||
// test set
|
||||
context.globalAlpha = 0.5;
|
||||
assert.equal(context.globalAlpha, 0.5);
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user