在本教程中，我们将学习如何使用 fabricjs 设置矩形选择的背景颜色。矩形是 fabricjs 提供的各种形状之一。为了创建一个矩形，我们必须创建一个 fabric.rect 类的实例并将其添加到画布中。
我们可以更改对象的尺寸、旋转它或当它被主动选择时对其进行操作。我们可以使用selectionbackgroundcolor属性来更改矩形选择的背景颜色。
语法new fabric.rect({ selectionbackgroundcolor : string }: object)
参数选项（可选） - 此参数是一个提供额外自定义的对象到我们的矩形。使用此参数，可以更改与选择背景颜色作为属性的对象相关的颜色、光标、描边宽度和许多其他属性等属性。
选项键selectionbackgroundcolor - 此属性接受 string 值。分配的值将确定选区的背景颜色。
示例 1未使用 selectionbackgroundcolor 属性时的默认颜色
让我们看一个代码示例，以了解在不使用 selectionbackgroundcolor 属性时选择内容的显示方式。从这个例子中我们可以看到，选择区域或对象后面的区域没有颜色。
<!doctype html><html><head> <!-- adding the fabric js library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script></head><body> <h2>default colour when selectionbackgroundcolor property is not used</h2> <p>you can click on the rectangle to see that the selection area has no colour</p> <canvas id="canvas"></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas("canvas"); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); // initiate a rectangle object var rect = new fabric.rect({ left: 155, top: 70, width: 170, height: 70, fill: "#00b7eb", stroke: "#ffa089", strokewidth: 5, padding: 50, }); // add it to the canvas canvas.add(rect); </script></body></html>
示例 2将 selectionbackgroundcolor 属性作为键传递
在此示例中，我们为 selectionbackgroundcolor 分配一个值财产。在本例中，我们向其传递了十六进制值“#e0ffff”，它是浅青色，因此选择区域看起来是该颜色。
<!doctype html><html><head> <!-- adding the fabric js library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script></head><body> <h2>passing selectionbackgroundcolor property as key</h2> <p>you can click on the rectangle to see that the selection area now has a light cyan colour</p> <canvas id="canvas"></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas("canvas"); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); // initiate a rectangle object var rect = new fabric.rect({ left: 155, top: 70, width: 170, height: 70, fill: "#00b7eb", stroke: "#ffa089", strokewidth: 5, padding: 50, selectionbackgroundcolor: "#e0ffff", }); // add it to the canvas canvas.add(rect); </script></body></html>
以上就是如何使用fabricjs设置矩形选择的背景颜色？的详细内容。