html - 使用 fabric.js 将一系列图像添加到画布

Question

我正在使用 AJAX 在画布上返回我想要的图像列表。现在我想循环该集合并将图像添加到我的画布，这不起作用。有人可以帮忙吗？以下是我的代码（在 html 头部分）

<script>
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            url: "http://localhost:7466/DataService.asmx/GetPersons",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {

                var person;
                person = response;

           //     var canvas = document.getElementById('myCanvas');
                //   var context = canvas.getContext('2d');

                var canvas = new fabric.Canvas('mycanvas');

                var i;
                for (i = 0; i < person.d.length; i++) {
                    //alert(person.d[i].URL);
                    var image = new Image();
                    image.src = person.d[i].URL;

                    var PosX = person.d[i].PosX;
                    var PosY = person.d[i].PosY;

                    fabric.Image.fromURL(image.src, function (oImg) {
                        oImg.set('Left',PosX).set('top',PosY);
                        canvas.add(oImg);
                    });
                }
           }
        });
    });

</script>

Answer 1

您是否尝试添加？

canvas.renderAll();

或者，在实例化您的画布元素后设置以下内容？：

canvas.renderOnAddition = true;