Raphael.js, проблема с очисткой холста - PullRequest
Новая
       16

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

1 голос
/ 21 апреля 2011

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();
});

index.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: enter image description here

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

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

Ответы [ 2 ]

0 голосов
/ 21 апреля 2011

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);
     }
  };
}();
0 голосов
/ 21 апреля 2011

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

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() {
 ...
});
...