Question

我正在尝试将图像添加到画布并使用clipTo将图像包含在容器内，这样当您拖动并调整图像大小时，它会被剪切到一个框中。

所以说画布是1000px x 1000px，图像位于50,50，并且是900px x 900px，可以将图像放在画布中间。这一切都很好。

然后，我们将clipTo添加到具有完全相同尺寸和位置的图像中，并且预期剪辑框实际上位于我们告诉它的位置并且是正确的大小，以便在缩放或拖动之前可以看到完整图像然后剪切到clipTop rect设置的位置......但事实并非如此，即使我们在图像上设置了尺寸并且剪辑完全相同，剪辑本身也总是小于图像，剪辑rect也最终定位完全错误。

Fabric版本：1.7.16 - 我们需要此版本用于其他方面。

以下是我们想要的以及实际发生的事情的演示。不知道我是否误解了剪辑是如何工作的，或者这是一个错误。

第一张图片是我们期望看到的，带有剪辑矩形的哈巴狗图像完全相同的大小和位置，所以你看不到它，然后你会拖动图像，它会在剪辑下消失。第二个图像是实际发生的，剪辑是完全错误的大小，代码说的是什么？

用红色标记剪辑，这样你就可以看到它正在做什么。

以下是此示例的代码：

var canvas = new fabric.Canvas('mainc',{
                width:1000,
                height:1000
            });


            var img = new Image();
            img.onload = function(){


                var imgInstance = new fabric.Image(img,{
                    width:900,
                    height:900,
                    top:50,
                    left:50,
                    originX:'left',
                    originY:'top',

                });

                canvas.add(imgInstance);

                imgInstance.clipTo = function(ctx) {
                    ctx.save();
                    ctx.setTransform(1, 0, 0, 1, 0, 0);

                    ctx.rect(50,50,900,900);
                    ctx.fillStyle='red';
                    ctx.fill();
                    ctx.restore();
                };
                canvas.renderAll();

            }
            img.src = 'http://example.com/test/pug.png';

编辑：

添加到JS小提琴但是将结构版本更改为1.7.15并且它在那里工作，但是如果我在我的本地版本上使用该版本的结构它仍然不起作用。 https://jsfiddle.net/xpvt214o/54670/

那么js fiddle有什么不同呢？

编辑2：

好吧所以这让我疯了，完全相同的代码在js小提琴上工作正常但不在本地，在本地它仍然使剪辑矩形呈现错误的大小和位置： - 第一个图像是js小提琴而第二个是本地相同的代码。

编辑3：

仅在视网膜屏幕上发生

FabricJS Image clipTo表现得非常奇怪

0 个答案: