Как да използвате fabricjs

Ха, аз съм много нов в canvas, опитвам се да се науча как да използвам 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...
});

Това ще гарантира, че елементът canvas е действително готов за използване до момента, в който вашият скрипт се задейства. Късмет!

person IGNIS    schedule 22.07.2014
comment
Хей, почувствах се толкова глупаво, когато прочетох отговора ти и бях сигурен, че щеше да проработи, но нищо не се промени, опитах се да направя платното си много по-голямо, но също не се получи... - person Daniele Sassoli; 22.07.2014
comment
Наистина ли? Това е странно. Разгледайте този JSFiddle. Може би проблемът е, че вашият JS работи, преди DOM да е готов? - person IGNIS; 22.07.2014