KineticJS : scaling issue while using custom clipFunc on 2x pixel aspect display

Question

Kineticjs 在 Retina 显示屏上自动采用 Canvas 大小和整个图形，因此一切看起来清晰干净，没有模糊的像素化。但当我尝试使用自定义剪辑功能时，出现了问题。

这是一些代码

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像素方面，它将完美渲染，但在layerTwo上添加的相同形状将忽略像素方面进行渲染，因此不会按比例放大2。结果，带有clipFunc的图层上的形状变成缩小 2 倍。

如何解决这个问题？

附注这是一些快速的example I've made on JS Fiddle

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

在正常屏幕上，我们看到黄色的宽度等于浅绿色的宽度，并且被正确裁剪。粉色不可见，因为超出了剪切区域。

在视网膜显示屏上，我们看到黄色比深绿色小，而粉色尤其明显。深绿色和粉色向我们展示了裁剪矩形已标准化视网膜尺寸，但所有图形均按比例缩小。

标准

像素长宽比 = 2

更新:在我的 Galaxy Nexus 上的 Chrome 中也是如此
更新:在 OS X 上的 Safari 中，一切看起来都很完美! OS X 上的其他主要浏览器(FF、O、Chrome)都会受到影响。

Answer 1

看起来像一个错误，我会将其添加到我的待办事项列表中。修复方法是在渲染之前根据像素比率缩放路径。即如果像素比为 2，那么我们需要将路径缩放 2 倍。