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

28
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
@@ -12,10 +18,6 @@
this.context = this.element.getContext('2d');
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 = {
/**
@@ -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';
},
/**
@@ -205,15 +207,13 @@
};
Kinetic.SceneCanvas.prototype = {
setWidth: function(width) {
this.width = width;
this.element.width = width;
this.element.style.width = width + 'px';
setWidth: function(width) {
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';
setHeight: function(height) {
Kinetic.Canvas.prototype.setHeight.call(this, height);
this.context.scale(pixelRatio, pixelRatio);
},
_fillColor: function(shape) {
var context = this.context, fill = shape.getFill();