Как использовать Fabricjs

Hy Я очень новичок в холсте, я пытаюсь научиться использовать Fabricjs, но я не могу заставить работать даже самый простой пример, и это очень расстраивает. Я скачал файл fabricjs-1.4.8.zip, и единственный файл, который я использую, это dist/fabric.min.js, вот мой html-код

<html>
  <head>
    <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="fabric.js-1.4.8/dist/fabric.js"></script>
    <script tye="text/javascript" src="test.js"></script>
  </head>
  <body>
    <canvas id="myCanvas" width="200" height="100"
     style="border:1px solid #000000;">
    </canvas>
  </body>
</html>

Во-первых, я не включил jquery, но, увидев много примеров, похоже, что это может помочь, но это не для меня, может быть, я включаю неправильную версию? и это мой файл test.js

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

  // create a rectangle with angle=45
  var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 20,
    height: 20,
    angle: 45
  });
  canvas.add(rect);

Я вижу границу моего элемента холста, но внутри нет прямоугольника. Может кто-нибудь увидеть, что я делаю неправильно? Благодарность


javascript fabricjs
person Daniele Sassoli    schedule 22.07.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, ваш холст имеет размер 200 x 100. Но вы пытаетесь нарисовать прямоугольник на 100 пикселей сверху. Ваш код, вероятно, работает, но прямоугольник не отображается, потому что он нарисован в нижней части холста. Попробуйте изменить эту строку

top: 100

к этому:

top: 0

ОБНОВЛЕНИЕ

Если сначала это не сработает, это может быть связано с тем, что DOM не загрузился до запуска вашего скрипта. Вы можете поместить свой код в прослушиватель готовых документов jQuery следующим образом:

$(document).ready(function(){
   //Your code here...
});

Это гарантирует, что элемент холста действительно будет готов к использованию к моменту запуска вашего скрипта. Удачи!

person IGNIS    schedule 22.07.2014
comment
Хе, я почувствовал себя таким глупым, когда прочитал твой ответ, и я был уверен, что это сработает, но ничего не изменилось, я попытался сделать свой холст намного больше, но тоже не получилось... - person Daniele Sassoli; 22.07.2014
comment
Действительно? Это странно. Взгляните на эту JSFiddle. Возможно, проблема в том, что ваш JS запускается до того, как DOM готова? - person IGNIS; 22.07.2014