在fabricJS中以编程方式将图像添加到画布答案

【问题标题】：programatically add images to canvas in fabricJS在fabricJS中以编程方式将图像添加到画布
【发布时间】：2015-02-14 21:59:05
【问题描述】：

我有一个要添加到 fabricJS 画布的图像。用户将指定应在画布上添加相同图像的次数。

当我遍历用户输入的次数并使用 fabric.Image.fromURL 添加时，它只会添加一次，并且只会添加到最后一个位置。

编辑：

Here is the jsfiddle on what I am trying to do
http://jsfiddle.net/apsixion/9g0Lfydw/3/

【问题讨论】：

标签： fabricjs

【解决方案1】：

这是我今天解决的方法.. 将用于绘制图像的代码移至外部的不同函数，并在外观中调用该函数。可能不是最佳解决方案，但对我有用。

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c', {
    selection: false
});

function drawRectangles(number) {

    i = 0;
    var pic =
        "http://depts.washington.edu/hplab/wordpress/wp-content/uploads/2014/10/smiley-e1415084033498.jpeg";
    for (var i = 0; i < number; i++) {
        var rect = new fabric.Rect({
            left: 5 + i * 160,
            top: 10,
            width: 150,
            height: 150,
            lockRotation: true,
            lockMovementX: false,
            lockMovementY: false
        });
        canvas.add(rect);
    }
    for (var k = 0; k < number; k++) {
        drawStars(k);
    }
}

function drawStars(k) {
    var picStars =
        "http://reviews.babymonitorsdirect.co.uk/images/5-stars.jpg";

    fabric.Image.fromURL(picStars, function (img2) {

        img2.set({
            lockRotation: true,
            lockMovementX: true,
            lockMovementY: true,
            left: 5 + k * 160,
            top: 10,
            width: 50,
            height: 50,
            lockScalingX: true,
            lockScalingY: true,
            selectable: true,
            hasControls: false
        });
        canvas.add(img2);

    });

}
drawRectangles(5);

http://jsfiddle.net/apsixion/z6dq0dp9/2/

【讨论】：