Raphael.js, проблема с очисткой холста

myraphael.js:

var raphael_test=function(){
  var canvas = Raphael("my-canvas", width, height);  

  return {
     startToDraw: function(){
        //canvas.clear() //Error happend when mouse click more than once
        canvas.rect(10, 10, 50, 50);
     }
  };
}();

draw.js:

var btn=$('#btn');

btn.click(function(){

  raphael_test.startToDraw();
});

индекс.html:

<body>
    <div id="my-canvas"></div>
    <input type="button" id="btn"></input>

    <script src="raphael-min.js"></script>
    <script src="myraphael.js"></script>
    <script src="draw.js"></script>
</body>

Каждый раз, когда нажимается кнопка, я хотел бы сначала очистить предыдущий рисунок, а затем снова нарисовать прямоугольник.

Я реализую часть clear перед canvas.rect(10, 10, 50, 50); в myraphael.js. Но когда мы нажимаем кнопку более одного раза, я получаю сообщение об ошибке от firebug: введите здесь описание изображения

raphael-min.js — это библиотека Raphael, загружаемая с официальной страницы raphael.

Я не понимаю эту ошибку и не знаю, как от нее избавиться...


javascript javascript-framework raphael
person Mellon    schedule 21.04.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

кавы != бумага. это проблема именования.

var width = 200;
var height = 200;

var raphael_test = (function() {

  var canvas = Raphael("my-canvas", width, height);  

  return {
     startToDraw: function() {
       canvas.clear(); 
       canvas.rect(10, 10, 50, 50);
     }
  };
})();

кстати: убедитесь, что все dom-объекты загружены правильно, а ваш js обернут ..

$(document).ready(function() {
 ...
});
person basecode    schedule 21.04.2011
comment
Привет, это не проблема с названием, это просто моя опечатка. В моем коде используется холст. Проблема в том, что даже у меня нет опечатки. - person Mellon; 21.04.2011
comment
Вы проверили, доступен ли объект dom с идентификатором my-canvas? вы можете написать console.log($(#my-canvas)); в первой строке raphael_test. - person basecode; 21.04.2011
comment
Меллон, у меня твой код работает без проблем. jsbin.com/avera4/2/edit (надеюсь, это поможет) - person basecode; 21.04.2011

arrow_upward
0
arrow_downward

canvas.clear() правильно, но доступно только в myraphael.js. Итак, добавьте к нему функцию clear:

var raphael_test=function(){
  var canvas = Raphael("my-canvas", width, height);  

  return {
     clear: function () {
        canvas.clear();
     },
     startToDraw: function () {
        canvas.rect(10, 10, 50, 50);
     }
  };
}();
person David Tang    schedule 21.04.2011
comment
@Mellon, мне действительно нужно увидеть твой обновленный код. Также у вас есть лишняя запятая здесь: <input type="button", id="btn"></input>. - person David Tang; 21.04.2011
comment
Код и сообщение об ошибке теперь обновлены в моем посте. При первом нажатии на кнопку ошибки нет, ошибка возникает при повторном нажатии на кнопку. - person Mellon; 21.04.2011