如何使用FabricJS自定义画布的视口？

在本文中，我们将学习如何使用 fabricjs 自定义画布的视口。视口是画布上用户可见的区域。我们可以使用 viewporttransform 属性来自定义视口，该属性允许我们控制视口的转换
语法new fabric.canvas(element: htmlelement|string, { viewporttransform: array }: object)
参数元素 - 此参数是元素本身，可以使用 document.getelementbyid() 或元素本身的 id 派生。 fabricjs 画布将在此元素上初始化。
选项（可选） - 此参数是一个对象，它提供对我们的画布进行额外的定制。使用这个参数，可以改变与画布相关的颜色、光标、边框宽度等许多属性，其中 viewporttransform 就是一个属性。它接受一个包含 6 个值的数组，用于确定平面上的变换。默认值为canvas.viewporttransform = [1, 0, 0, 1, 0, 0]。
示例1传递viewporttransform 属性作为类的关键
让我们看一个代码示例，了解如何自定义画布的视口。在此示例中，我们使用了值 [0.7, 0.1, 0.5, 0.9, 20, 50] 来表示scalex、skewy、skewx、scaley、translation和translationy ，分别。
<!doctype html><html><head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script></head><body> <h2>customizing the viewport of the canvas using fabricjs </h2> <p>select an area around the object to see the viewports.</p> <canvas id="canvas"></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas("canvas", { viewporttransform: [0.7, 0.1, 0.5, 0.9, 20, 50] }); // creating an instance of the fabric.rect class var circle = new fabric.circle({ left: 215, top: 100, radius: 50, fill: "red", }); // adding it to the canvas canvas.add(circle); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); </script></body></html>
示例 2将 viewporttransform 属性作为具有自定义值的键传递以缩小对象
让我们看另一个代码示例显示缩放 80% 并平移至右下角且不倾斜的变换。
<!doctype html><html><head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script></head><body> <h2>customizing the viewport of the canvas using fabricjs </h2> <p>select an area around the object to see the viewports.</p> <canvas id="canvas"></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas("canvas", { viewporttransform: [0.8, 0, 0, 0.8, 50, 50] }); // creating an instance of the fabric.rect class var circle = new fabric.circle({ left: 215, top: 100, radius: 50, fill: "red" }); // adding it to the canvas canvas.add(circle); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); </script></body></html>
以上就是如何使用fabricjs自定义画布的视口？的详细内容。

如何使用FabricJS自定义画布的视口？

VIP推荐