canvas 相关问题

因此，有多种方法可以加载画布背景图像，但在我的代码中，我像这样加载它： var canvas = new Fabric.Canvas('canvas', { backgroundImage: " 因此，有多种方法可以加载画布背景图像，但在我的代码中，我像这样加载它： var canvas = new fabric.Canvas('canvas', { backgroundImage: "<?php echo $image; } ?>", } 在我发现的教程中（https://www.tutorialspoint.com/how-to-create-a-canvas-with-background-image-using-fabricjs）它展示了如何设置画布高度和宽度，例如所以： canvas.setWidth(document.body.scrollWidth / 2.2); canvas.setHeight(650); 但是我需要调整背景图像本身而不是整个画布的大小，而且我在网上找不到任何描述如何执行此操作的地方。从逻辑上讲，当我最初设置画布背景图像时应该设置如下所示： var canvas = new fabric.Canvas('canvas', { backgroundImage: "<?php echo $image; } ?>", backgroundImageWidth: "50%", backgroundImageHeight: "100%",} 但这不起作用，我尝试了其他一些方法，例如 setBackgroundImageWidth: 或 backgroundSize: 等......只是在黑暗中拍摄。我找不到任何描述以这种方式设置背景图像大小的 stackoverflow 问题。有谁知道该怎么做吗？无法在fabricJS 的构造函数中指定背景图像的尺寸。当您从 URL 加载图像时，您必须利用 Image 类的 fromURL() 方法来实例化 FabricJS Image，然后您可以将其与 backgroundImage 属性一起使用。 fromURL() 方法接受一个回调函数，该函数应该负责图像的实际大小调整。不幸的是，你不能简单地改变宽度和高度，因为 FabricJS 在内部锁定了宽高比。相反，您必须计算所需的宽度和高度作为比例，并使用图像的 .scaleX 和 .scaleY 属性。这是一个例子： let canvas = document.createElement("canvas"); document.body.appendChild(canvas); let canv = new fabric.Canvas(canvas, { backgroundColor: 'rgba(230, 230, 230, 1)', backgroundImage: fabric.Image.fromURL("https://picsum.photos/id/237/400/300", (img) => { img.scaleX = canv.width * 0.5 / img.width; img.scaleY = canv.height * 0.5 / img.height; canv.backgroundImage = img; canv.renderAll(); }) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>

javascript css canvas fabricjs

回答 1 投票 0

context.drawImage() 即使在 .onLoad 之后也无法在移动设备上工作（TypeError：null 不是对象）

对此感到非常困惑...我的代码在桌面上运行良好，但由于某种原因它无法在移动浏览器上正确运行。我认为这可能是因为画布创建速度不够快......

javascript html reactjs canvas html5-canvas

回答 1 投票 0

fabric.js 库中画布内矩形块的正确移动

必须确保块无论宽度和长度如何都不会相互重叠，并且在移动和调整大小时不会超出画布的边界。块可以是 e...

javascript algorithm canvas fabricjs

回答 1 投票 0

在小部件后面传播点击

我有一个堆栈，里面有两个小部件。我正在尝试检测对堆栈底部小部件的点击，该小部件位于顶部小部件的后面。我正在使用 HitTestBehavior.translucent，但只有在