2

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

这是一些代码

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 倍。

我该如何解决这个问题？

PS 这是我在 JS Fiddle 上制作的一些简单示例

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

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

在 Retina 显示屏上，我们看到黄色比深绿色小，粉色特别明显。深绿色和粉红色向我们展示了裁剪矩形使 Retina 的尺寸标准化，但所有图形都按比例缩小。

标准 非视网膜

像素纵横比 = 2 视网膜

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

4

2 回答 2

1

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

于 2013-06-13T16:07:21.527 回答
1

为了修复这个错误，我修改了这个评论kinetic-v4.5.5.js中提到的源代码

于 2013-08-01T13:39:06.467 回答