如何为在fabric js中创建的多个矩形添加不同的ID答案

【问题标题】：how to add different id for multiple rectangles which is created in fabric js如何为在fabric js中创建的多个矩形添加不同的ID
【发布时间】：2023-03-24 08:15:01
【问题描述】：

嗨，我正在使用 fabricjs 来拖动和调整矩形的大小。工作原理是，当我单击一个按钮时，会形成一个矩形。对于每个按钮单击，我可以添加每个矩形。我想为每个矩形添加不同的样式。为此，我尝试为每个矩形添加不同的 id/class。但它不工作。这是我的代码

<html>
<head>
    <script src="fabric.min.js"></script>
    <style>
        #c{

            background-color:red;
        }
    </style>
</head>
<body>
    <canvas id="c"></canvas>
    <button id="my-image" onclick="myFunction()">click</button>

    <script>
        var canvas = new fabric.Canvas('c', { width: 500, height: 400, });
        var click = 0;
        $('#my-image').click(myFunction);

        function myFunction() {
            click += 1;

            var imgElement = document.getElementById('my-image');
            var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' });
        rect.setAttribute("class", click);

            canvas.add(rect);

            };

    </script>
</body>
</html>

我的代码有什么问题？

【问题讨论】：

问题是你使用的是 jQuery 而你没有包含它。

标签： javascript jquery fabricjs

【解决方案1】：

在使用 jQuery 代码时，您必须包含 jQuery 库：

<script src="path/to/jquery.js"></script>
<script src="fabric.min.js"></script>

和

您可以删除内联事件处理程序onclick。
您可以为其创建一个文档就绪块，尽管您的代码可以在元素下方运行，但如果有它会很好。

【讨论】：

我已经添加了 jquary 库。错误是“Uncaught TypeError: rect.setAttribute is not a function”
@aswathy 我想你需要看到console.log(rect);，如果这是你的画布元素，那么它应该添加属性，如果这是一个对象，那么你必须在对象本身中设置属性。

【解决方案2】：

您可以通过在 all.js 文件中添加以下代码来为每个项目设置 id

在 fabric.js 构建版本 1.3.0 中：在对象声明中添加

 var object = {
   id:   this.id,
   remaining properties in all.js
  }

现在您可以使用以下方式设置对象 ID：

canvas.getActiveObject().id=你的id值；您可以使用以下命令检索对象 ID：

Myid= canvas.getActiveObject().get('id');

所以，通过这种方式，我们为在 fabric.js 中创建的矩形添加多个 id

【讨论】：

现在我只有 fabric.min.js ，还需要文件吗？
确保你有 jquery-ui.min.js 然后试一试
我无法使用 jquery-ui

【解决方案3】：

你有没有检查过控制台的错误？尝试您的代码时，我收到错误“setAttribute 不是函数”。可能是因为您的 var rect 不是 DOM 中的元素，您可以调用此方法。下面对您的代码稍作修改的示例似乎可以工作......虽然我没有关于 fabric.js 的背景

var canvas = new fabric.Canvas('c', { width: 500, height: 150, });
var click = 0;

$('#my-image').click(myFunction);

function myFunction() {
    click += 1;

    var imgElement = document.getElementById('my-image');
    var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' });
    $(rect).addClass(click);
    canvas.add(rect);

};

#c{background-color:red;}

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.1/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="c"></canvas>
<button id="my-image" onclick="myFunction()">click</button>

此外，您还想为每个新矩形创建一个唯一的类名。为此，我会使用 id 而不是类。

【讨论】：