lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-03-03 16:58:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

implemented new pixel ratio logic, which covers all drawing cases using a canvas context. The new logic also has better performance than the previous

Browse Source
This commit is contained in:
Eric Rowell
2013-02-12 09:58:47 -08:00
parent 5e65b4c596
commit 26943f8245
4 changed files with 29 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/Canvas.js
View File

@@ -1,4 +1,10 @@
(function() {
// calculate pixel ratio
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
devicePixelRatio = window.devicePixelRatio || 1, backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1,
pixelRatio = devicePixelRatio / backingStoreRatio;
/**
* Canvas Renderer constructor
* @constructor
@@ -13,10 +19,6 @@
this.setSize(width || 0, height || 0);
};
// calculate pixel ratio
var canvas = document.createElement('canvas'), context = canvas.getContext('2d'), devicePixelRatio = window.devicePixelRatio || 1, backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1;
Kinetic.Canvas.pixelRatio = devicePixelRatio / backingStoreRatio;
Kinetic.Canvas.prototype = {
/**
* clear canvas
@@ -53,7 +55,7 @@
setWidth: function(width) {
this.width = width;
// take into account pixel ratio
this.element.width = width * Kinetic.Canvas.pixelRatio;
this.element.width = width * pixelRatio;
this.element.style.width = width + 'px';
},
/**
@@ -65,7 +67,7 @@
setHeight: function(height) {
this.height = height;
// take into account pixel ratio
this.element.height = height * Kinetic.Canvas.pixelRatio;
this.element.height = height * pixelRatio;
this.element.style.height = height + 'px';
},
/**
@@ -206,14 +208,12 @@
Kinetic.SceneCanvas.prototype = {
setWidth: function(width) {
this.width = width;
this.element.width = width;
this.element.style.width = width + 'px';
Kinetic.Canvas.prototype.setWidth.call(this, width);
this.context.scale(pixelRatio, pixelRatio);
},
setHeight: function(height) {
this.height = height;
this.element.height = height;
this.element.style.height = height + 'px';
Kinetic.Canvas.prototype.setHeight.call(this, height);
this.context.scale(pixelRatio, pixelRatio);
},
_fillColor: function(shape) {
var context = this.context, fill = shape.getFill();

2
src/Layer.js
View File

@@ -36,6 +36,8 @@
* @methodOf Kinetic.Layer.prototype
*/
draw: function() {
var context = this.getContext();
// before draw handler
if(this.beforeDrawFunc !== undefined) {
this.beforeDrawFunc.call(this);

11
tests/js/manualTests.js
View File

@@ -1303,6 +1303,8 @@ Test.Modules.DRAG_AND_DROP = {
width: 578,
height: 200
});
var bgLayer = new Kinetic.Layer();
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
@@ -1329,6 +1331,8 @@ Test.Modules.DRAG_AND_DROP = {
group.add(rect);
layer.add(group);
stage.add(bgLayer);
stage.add(layer);
var anim = new Kinetic.Animation(function() {
@@ -1337,6 +1341,13 @@ Test.Modules.DRAG_AND_DROP = {
anim.start();
showHit(layer);
var context = bgLayer.getCanvas().getContext();
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 20);
context.strokeStyle = 'red';
context.stroke();
},
'stage and shape draggable': function(containerId) {
var stage = new Kinetic.Stage({