KineticJS：在2x像素纵横比显示器上使用自定义clipFunc时出现缩放问题

Kineticjs自动采用画布大小和视网膜上的整体图形显示，因此所有图像看起来清晰、干净，没有模糊的像素。但当我尝试使用自定义剪辑功能时，出现了问题

这里有一些代码

this.layerOne = new Kinetic.Layer();
this.layerTwo = new Kinetic.Layer({
 clipFunc : function(c){
 var ctx = c.getContext();
  ctx.rect(0,0,width,height);
 }
});

如果我在layerOne上添加形状，它将在考虑2x像素纵横比的情况下完美渲染，但在layerOne上添加的相同形状将在忽略像素纵横比的情况下渲染，因此不会放大2倍。因此，使用clipFunc的图层上的形状变小2倍

如何解决此问题？

还有，这里有一些快速

• 浅绿色为背景，深绿色为100像素正方形，均位于非裁剪层上
• 浅黄色是100像素的正方形，粉红色是宽度等于舞台的矩形，它们位于裁剪层上

在普通屏幕上，我们看到黄色的宽度等于浅绿色的宽度，并且经过适当的裁剪。粉红色不可见，因为它超出了剪裁区域

在视网膜显示器上，我们看到黄色比深绿色小，粉红色尤其明显。深绿色和粉红色向我们展示了裁剪矩形已经使视网膜的尺寸标准化，但所有图形都缩小了

斯坦达特

像素纵横比=2

更新：在我的Galaxy Nexus上的Chrome中相同

---

更新：在OSX上的Safari中，一切看起来都很完美！OS X上的其他主要浏览器（FF、O、Chrome）也受到影响。

看起来像个bug，我将把它添加到我的待办事项列表中。修复方法是在渲染之前根据像素比率缩放路径。i、 e.如果像素比为2，那么我们需要将路径缩放2倍。

要修复此错误，我修改了

kinetic-v4.5.5.js

源代码，如

中所述，是的，看起来像个错误！我刚刚测试过，在standart和双像素屏幕上拖动对象时，行为有很大的不同：在HiRes显示器上，剪切矩形也会移动！所以，为了修复这个问题，我应该使用.setTransform（scale，0，0，scale，0，0）？@Geradlus_RU不确定你是否已经修复了它，因为它已经超过一个月了。在

\u clip

函数中查找最后一行，并将其更改为

context.setTransform（this.pixelRatio，0,0，this.pixelRatio，0,0）现在对我有效…@MarkSmits，我刚刚尝试了这个黑客，但在我的情况下不起作用。幸运的是，这不是目前的“热点问题”，所以我并不急于解决这个问题，但无论如何我都需要解决方案或黑客。非常感谢。如果使用KineticJS的
.min.js
-文件，则必须将其替换为
b.setTransform（this.pixelRatio，0,0，this.pixelRatio，0,0）。顺便说一句：@MarkSmits你是我的英雄！：D@MarkSmits哦，我没听懂。试图修改我自己的代码而不是源代码。我几小时后再试试。