Javascript 如何为fabric js中创建的多个矩形添加不同的id_Javascript_Jquery_Fabricjs

Javascript 如何为fabric js中创建的多个矩形添加不同的id

javascript jquery

Javascript 如何为fabric js中创建的多个矩形添加不同的id,javascript,jquery,fabricjs,Javascript,Jquery,Fabricjs,嗨，我正在使用fabricjs来拖动和调整矩形的大小。工作是，当我点击一个按钮，一个矩形形成。对于每个按钮单击，我可以添加每个矩形。我想为每个矩形添加不同的样式。为此，我尝试为每个矩形添加不同的id/类。但它不起作用。这是我的密码 <html> <head> <script src="fabric.min.js"></script> <style> #c{ background-

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

<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>


#c{
背景色：红色；
}
点击
var canvas=newfabric.canvas（'c'，{宽度：500，高度：400，}）；
var-click=0；
$（“#我的图像”）。单击（myFunction）；
函数myFunction（）{
单击+=1；
var imgElement=document.getElementById（'my-image'）；
var rect=new fabric.rect（{宽度：100，高度：50，填充：“绿色”}）；
rect.setAttribute（“类”，单击）；
canvas.add（rect）；
};

我的代码有什么问题？

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

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

及

您可以删除内联事件处理程序

onclick

您可以为它创建一个doc-ready块，尽管您的代码可以工作，因为它位于元素下面，但是拥有它会很好

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

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

及

您可以删除内联事件处理程序

onclick

您可以为它创建一个doc-ready块，尽管您的代码可以工作，因为它位于元素下面，但是拥有它会很好

您可以通过在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，您可以通过在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。您是否检查过控制台中的错误？尝试你的代码，我得到错误“setAttribute不是一个函数”。可能是因为您的var rect不是DOM中的元素，所以您可以在其上调用此方法。下面的示例稍微修改了代码，似乎可以正常工作。。。虽然我没有关于fabric.js的背景知识

var canvas=newfabric.canvas（'c'，{宽度：500，高度：150，}）；
var-click=0；
$（“#我的图像”）。单击（myFunction）；
函数myFunction（）{
单击+=1；
var imgElement=document.getElementById（'my-image'）；
var rect=new fabric.rect（{宽度：100，高度：50，填充：“绿色”}）；
$（rect）.addClass（单击）；
canvas.add（rect）；
};
#c{背景色：红色；}

单击
您是否检查过控制台错误？尝试你的代码，我得到错误“setAttribute不是一个函数”。可能是因为您的var rect不是DOM中的元素，所以您可以在其上调用此方法。下面的示例稍微修改了代码，似乎可以正常工作。。。虽然我没有关于fabric.js的背景知识

var canvas=newfabric.canvas（'c'，{宽度：500，高度：150，}）；
var-click=0；
$（“#我的图像”）。单击（myFunction）；
函数myFunction（）{
单击+=1；
var imgElement=document.getElementById（'my-image'）；
var rect=new fabric.rect（{宽度：100，高度：50，填充：“绿色”}）；
$（rect）.addClass（单击）；
canvas.add（rect）；
};
#c{背景色：红色；}

单击
问题是您正在使用jQuery，但尚未将其包括在内。问题是您正在使用jQuery，但尚未将其包括在内。我已经添加了jquary库。错误是“uncaughttypeerror:rect.setAttribute不是函数”@aswathy我想您需要查看console.log（rect）如果这是您的画布元素，那么它应该添加属性，如果这是一个对象，那么您必须在对象本身中设置属性。我已经添加了jquary库。错误是“uncaughttypeerror:rect.setAttribute不是函数”@aswathy我想您需要查看console.log（rect）如果这是你的画布元素，那么它应该添加属性，如果这是一个对象，那么你必须在对象本身中设置属性。现在我只有fabric.min.js，还有其他文件需要吗？确保你有jquery-ui.min.js，然后给出一个tryi不能使用jquery-uinow我只有fabric.min.js，还有其他文件需要吗？请确保您有jquery-ui.min.js，然后给出一个tryi不能使用jquery-ui的命令