[英]Cant' change KineticJS 5.0.1 PixelRatio
Building a canvas with KineticJS 5.0.1 and it looks awful on my Retina screen. 使用KineticJS 5.0.1构建画布,在我的Retina屏幕上看起来很糟糕。 I couldn't figure out what was going on because KineticJS jsfiddle's look just fine.
我不知道发生了什么,因为KineticJS jsfiddle的外观还不错。 Then I realized that jsfiddle uses version 4.3.1.
然后我意识到jsfiddle使用版本4.3.1。 Switched and now everything is beautiful and retina.
切换,现在一切都变得美丽而视网膜。
Why doesn't v5 handle this automatically anymore? v5为什么不再自动处理此问题? And how can I fix it?
我该如何解决? I tried to set Kinetic.pixelRatio=2 but that didn't do anything.
我试图设置Kinetic.pixelRatio = 2,但没有做任何事情。
It turns out that pixelRatio is hard-coded into kineticJS v5+. 事实证明,pixelRatio被硬编码到dynamicJS v5 +中。 This is due to some sort of zooming/scaling issue and also, in part, performance issues.
这是由于某种缩放/缩放问题,部分是由于性能问题。 I am going to experiment but in the meantime, this can be easily fixed in the source code for kineticJS.
我将进行实验,但与此同时,可以在dynamicJS的源代码中轻松修复此问题。 Find this function:
查找此功能:
;(function() {
// calculate pixel ratio
var canvas = Kinetic.Util.createCanvasElement(),
context = canvas.getContext('2d'),
// 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;
And change the 1 on the very last line to window.devicePixelRatio. 并将最后一行的1更改为window.devicePixelRatio。 The performance really isn't so bad but I think what I'm going to try doing, since my use just needs a short animation for many objects when a button is pressed, is to have it animate in KineticJS at pixelRatio 1 and then clear it and redraw the finished product at pixelRatio=whatever is appropriate for the device.
性能确实不是很差,但是我认为我要尝试做的是,因为按下按钮时我的使用只需要对许多对象进行简短的动画处理,就可以使其在KineticJS中以pixelRatio 1进行动画处理,然后清除然后将其重新绘制为pixelRatio =适合该设备的成品。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.