Question

我有一个有趣的错误，你们中的一些人可能会熟悉（我希望）。

我在画布上绘制了一堆图片，我允许用户通过拖放来移动这些图像。

我有一个功能试用版，当用户按下按钮开始试用时会调用该功能试用版

function trial(){
    numImages   = objectIndices.length;
    checkObjectPositions = newFilledArray(numImages, 0);
    var initialPositions = [];        
    initialPositions = createCoords(numImages,initArrangementRad);        
    xpos = initialPositions.x;
    ypos = initialPositions.y;        
    canvas.clear().renderAll();        
    drawArena();
    drawObjects();
    canvas.getObjects();                        
    listenForEvents();
    canvas.renderAll();            
};
function drawObjects(){
        // load sprite with objects
    fabric.Image.fromURL(url, function(objectImg) {
        // temp canvas to generate object images
        var tempCanvas = new fabric.StaticCanvas();
        // only to fit one object onto temp canvas
        tempCanvas.setDimensions({
          width: spriteWidth,
          height: spriteHeight
        });

        // make sure image is drawn from left/top corner
        objectImg.originX = 'left';
        objectImg.originY = 'top';
        // add it onto temp canvas
        tempCanvas.add(objectImg);
        for (var i=0;i<objectIndices.length;i++) {
            var posidx = i;                
            var indicetodraw = objectIndices[posidx];
            var object = createObject(posidx,indicetodraw, objectImg,tempCanvas);
        }
    });
};

function createObject(posidx,idx, objectImg, tempCanvas) {

    // offset object sprite to fit each of the objects onto it
    objectImg.left = -spriteWidth * idx;
    objectImg.setCoords();
    tempCanvas.renderAll();
    var posX = xpos[posidx]-(spriteWidth/2)*sizeOn;
    var posY = ypos[posidx]-(spriteHeight/2)*sizeOn;
    // get data url for that object
    var img = new Image;
    img.src = tempCanvas.toDataURL();

    // create image of an object from data url
    var oImg = new fabric.Image(img, {
      width: spriteWidth,
      height: spriteHeight,
      name:"object"+[idx],
      index: idx,
      originX:'left',
      originY:'top',
      left: posX,
      top: posY,
      hasBorders: false,
      hasControls: false,
      lockRotation: true,
      lockUniScaling:true,
      scaleX: sizeOff,
      scaleY: sizeOff,
      hasControls: false
    });
    canvas.add(oImg);
    return oImg;
}

我想暂时告诉你子函数的细节，关键是当我调用drawObjects（）时，它会在圆形竞技场周围绘制一组对象。当我在Chrome中运行它时，所有图像在加载时都没有问题，但是在firefox中，在用户单击画布所在的div中的某个位置之前，不会绘制任何内容。我尝试在trial（）函数中模拟点击，但这并没有解决它，因为它没有链接到单击按钮但在div（或画布）内的任何位置，并且将单击函数附加到Div元素不会做任何事情。

我正在使用fabric 1.4.9

任何帮助将不胜感激。

谢谢！

伊恩

图像不会在firefox中加载，但在鼠标点击时会绘制

0 个答案: