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

Question

I want to cut out some squares from a picture. The problem is that Createjs masking with drawRect is not working in Safari. Please check the following codepen in Safari

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

It works on all the browsers except Safari

Answer 1

The issue with this is not masking or EaselJS, but how Safari handles winding rectangles drawn with negative coordinates. It looks like most browsers treat a rectangle with a one negative dimension as drawn in reverse, but Safari does not.

A super simple canvas example has the same problem:

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();

In most browsers, this draws the cut-out area. Safari does not.

Your solution of using your own lineTo() commands is a good workaround.

Answer 2

Managed to get it worked in Safari using lineTo and moveTo functions instead of drawRect

eg

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