mirror of
https://github.com/konvajs/konva.git
synced 2026-03-03 16:58:33 +08:00
for desktop browsers, always set pixel ratio to 1. When users have zoom enabled, it affects pixel ratio and causes artifacts. There doesn't appear to be a way to detect zoom level for modern browsers in order to adjust the pixel ratio
This commit is contained in:
@@ -2,14 +2,21 @@
|
||||
// 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;
|
||||
// if using a mobile device, calculate the pixel ratio. Otherwise, just use
|
||||
// 1. For desktop browsers, if the user has zoom enabled, it affects the pixel ratio
|
||||
// and causes artifacts on the canvas. As of 02/26/2014, there doesn't seem to be a way
|
||||
// to reliably calculate the browser zoom for modern browsers, which is why we just set
|
||||
// the pixel ratio to 1 for desktops
|
||||
_pixelRatio = Kinetic.UA.mobile ? (function() {
|
||||
var devicePixelRatio = window.devicePixelRatio || 1,
|
||||
backingStoreRatio = context.webkitBackingStorePixelRatio
|
||||
|| context.mozBackingStorePixelRatio
|
||||
|| context.msBackingStorePixelRatio
|
||||
|| context.oBackingStorePixelRatio
|
||||
|| context.backingStorePixelRatio
|
||||
|| 1;
|
||||
return devicePixelRatio / backingStoreRatio;
|
||||
})() : 1;
|
||||
|
||||
/**
|
||||
* Canvas Renderer constructor
|
||||
|
||||
@@ -58,11 +58,17 @@ var Kinetic = {};
|
||||
/(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
|
||||
/(msie) ([\w.]+)/.exec( ua ) ||
|
||||
ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
|
||||
[];
|
||||
[],
|
||||
|
||||
// adding mobile flag as well
|
||||
mobile = !!(navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i));
|
||||
|
||||
return {
|
||||
browser: match[ 1 ] || '',
|
||||
version: match[ 2 ] || '0'
|
||||
version: match[ 2 ] || '0',
|
||||
|
||||
// adding mobile flab
|
||||
mobile: mobile
|
||||
};
|
||||
})(),
|
||||
|
||||
|
||||
34
src/Util.js
34
src/Util.js
@@ -319,6 +319,40 @@
|
||||
_isString: function(obj) {
|
||||
return Object.prototype.toString.call(obj) == OBJECT_STRING;
|
||||
},
|
||||
// Returns a function, that, when invoked, will only be triggered at most once
|
||||
// during a given window of time. Normally, the throttled function will run
|
||||
// as much as it can, without ever going more than once per `wait` duration;
|
||||
// but if you'd like to disable the execution on the leading edge, pass
|
||||
// `{leading: false}`. To disable execution on the trailing edge, ditto.
|
||||
_throttle: function(func, wait, options) {
|
||||
var context, args, result;
|
||||
var timeout = null;
|
||||
var previous = 0;
|
||||
options || (options = {});
|
||||
var later = function() {
|
||||
previous = options.leading === false ? 0 : new Date().getTime();
|
||||
timeout = null;
|
||||
result = func.apply(context, args);
|
||||
context = args = null;
|
||||
};
|
||||
return function() {
|
||||
var now = new Date().getTime();
|
||||
if (!previous && options.leading === false) previous = now;
|
||||
var remaining = wait - (now - previous);
|
||||
context = this;
|
||||
args = arguments;
|
||||
if (remaining <= 0) {
|
||||
clearTimeout(timeout);
|
||||
timeout = null;
|
||||
previous = now;
|
||||
result = func.apply(context, args);
|
||||
context = args = null;
|
||||
} else if (!timeout && options.trailing !== false) {
|
||||
timeout = setTimeout(later, remaining);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
},
|
||||
/*
|
||||
* other utils
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user