Question

我想从图片上切出一些正方形。问题是使用Createjs进行drawRect的屏蔽在Safari中不起作用。请在Safari中检查以下Codepen

https://codepen.io/anon/pen/moXXRN

它适用于除Safari之外的所有浏览器

Answer 1

此问题不是遮罩或EaselJS，而是Safari如何处理以负坐标绘制的缠绕矩形。看起来大多数浏览器都将具有负一维的矩形按相反方向绘制，但Safari却没有。

超级simple canvas example具有相同的问题：

var ctx = document.getElementById("canvas").getContext("2d");
ctx.beginPath();
ctx.rect(50,50,50,50);
ctx.rect(150, 150, 50, 50);
ctx.rect(300, 0, 350, -350);
ctx.fillStyle = "red";
ctx.fill();

在大多数浏览器中，这会绘制出剪切区域。 Safari没有。

您使用自己的lineTo()命令的解决方案是一个不错的解决方法。

Answer 2

设法使用lineTo和moveTo函数而不是drawRect在Safari中工作

例如

shape.graphics.moveTo( 50, 50 );
shape.graphics.lineTo( 100, 50 );
shape.graphics.lineTo( 100, 100 );
shape.graphics.lineTo( 50, 100 );
shape.graphics.lineTo( 50, 50 );

shape.graphics.moveTo( 300, 0 );
shape.graphics.lineTo( 0, 0 );
shape.graphics.lineTo( 0, 300 );
shape.graphics.lineTo( 300, 300 );
shape.graphics.lineTo( 300, 0 );

https://codepen.io/anon/pen/EMEZMx

使用drawRect的CreateJS遮罩无法在Safari中使用

2 个答案: