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

clipping regions now work correctly when device pixel ratio != 1

Browse Source
This commit is contained in:
Eric Rowell 2013-08-25 22:26:42 -07:00
parent bf39df54b0
commit 6663ec0652
5 changed files with 55 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gruntfile.js
View File

@ -56,6 +56,8 @@ module.exports = function(grunt) {
'tests/js/unit/layerTests.js',
'tests/js/unit/shapeTests.js',
'tests/js/unit/ddTests.js',
'tests/js/unit/canvasTests.js',
'tests/js/unit/shapes/rectTests.js',
'tests/js/unit/shapes/circleTests.js',
'tests/js/unit/shapes/ellipseTests.js',

10
src/Canvas.js
View File

@ -46,6 +46,12 @@
this.context = this.element.getContext(contextType);
this.setSize(width, height);
},
/**
* reset canvas context transform
*/
reset: function() {
this.getContext().setTransform(1 * _pixelRatio, 0, 0, 1 * _pixelRatio, 0, 0);
},
/**
* get canvas element
* @method
@ -241,7 +247,9 @@
context.beginPath();
context.rect(clipX, clipY, clipWidth, clipHeight);
context.clip();
context.setTransform(1, 0, 0, 1, 0, 0);
this.reset();
container._drawChildren(this);
context.restore();
}
};

20
src/Container.js
View File

@ -255,21 +255,21 @@
if (clip) {
canvas._clip(this);
}
children = this.children;
len = children.length;
for(n = 0; n < len; n++) {
children[n].drawScene(canvas);
}
if (clip) {
canvas.getContext().restore();
else {
this._drawChildren(canvas);
}
}
return this;
},
_drawChildren: function(canvas) {
var children = this.children;
len = children.length;
for(n = 0; n < len; n++) {
children[n].drawScene(canvas);
}
},
drawHit: function() {
var clip = this.getClipWidth() && this.getClipHeight() && this.nodeType !== 'Stage',
n = 0,

32
tests/js/unit/canvasTests.js Normal file
View File

@ -0,0 +1,32 @@
Test.Modules.CANVAS = {
'pixel ratio': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: 578/2,
y: 100,
radius: 70,
fill: 'green',
stroke: 'blue',
strokeWidth: 4
});
layer.add(circle);
stage.add(layer);
stage.setWidth(578/2);
stage.setHeight(100);
stage.draw();
}
};

7
tests/js/unit/containerTests.js
View File

@ -1,5 +1,5 @@
Test.Modules.CONTAINER = {
'use clipping function': function(containerId) {
'clip': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -7,10 +7,7 @@ Test.Modules.CONTAINER = {
draggable: true
});
var layer = new Kinetic.Layer({
clipFunc: function(canvas) {
var context = canvas.getContext();
context.rect(0, 0, 400, 100);
}
clip: [0, 0, stage.getWidth() / 2, 100]
});
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({