使用 drawRect 進行的 Createjs 屏蔽在 Safari 中不起作用

Question

我想從圖片中剪下一些正方形。 問題是使用drawRect屏蔽的Createjs在 Safari 中不起作用。 請在 Safari 中檢查以下代碼筆

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

它適用於除 Safari 之外的所有瀏覽器

Answer 1

問題不在於遮罩或 EaselJS，而在於 Safari 如何處理使用負坐標繪制的纏繞矩形。 看起來大多數瀏覽器將一個負一維的矩形視為反向繪制，但 Safari 不會。

一個超級簡單的畫布例子也有同樣的問題：

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