Raphael.js，清除画布的问题

发布于 2024-11-02 13:20:23 字数 1135 浏览 4 评论 0原文

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>

每次单击按钮时，我想首先清除之前的绘制，然后再次绘制矩形。

我在 myraphael.js 中的 canvas.rect(10, 10, 50, 50); 之前实现了 clear 部分。但是当鼠标多次单击按钮时，我收到来自 firebug 的错误：在此处输入图像描述

raphael-min.js 是从 raphael 官方页面下载的 Raphael 库。

我不明白这个错误，也不知道如何消除它......

原文

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>

Every time when button clicked, I would like to first clear the previous draw, then draw the rectangular again.

I implement the clear part before canvas.rect(10, 10, 50, 50); in myraphael.js. But when mouse click on the button more than once, I got error from firebug:
enter image description here

raphael-min.js is the Raphael library download from raphael official page.

I don't understand this error, and have no idea how to get rid of it...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

简单气质女生网名 2024-11-09 13:20:23

卡瓦斯！=纸。这是一个命名问题。

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

cavas != paper. this is a naming issue.

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

btw: please make sure that all dom-objects are loaded properly and your js is wrapped by..

$(document).ready(function() {
 ...
});

回复收藏 0 原文

樱娆 2024-11-09 13:20:23

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

canvas.clear() is correct, but it is only accessible in myraphael.js. So, add a clear function to it:

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 原文

~没有更多了~