Question

有没有办法为raphael对象实现擦除方法。在这种擦除方法中，我想删除特定raphael对象的特定部分。这意味着擦除方法应该像真正的橡皮擦一样工作。在raphael文档中有一个方法调用 Paper.clear（）。但我们只能删除整篇论文。任何形式的帮助都表示赞赏。

Answer 1

使用remove（）方法的正常方法。

http://raphaeljs.com/reference.html#Element.remove

element.remove();

Answer 2

您最终可以创建一个函数，用于在点击时绘制与纸张背景颜色相同的颜色。像这个代码的东西（帖子末尾的jsfiddle）。它会覆盖你的内容而不是删除它，但它看起来就像它。

            var timeoutId = 0;
            var cursorX;
            var cursorY;
            var mouseStillDown = false;

            paper = Raphael("paper1","100%","100%");

            paper.rect(10,10,100,100).attr({
                fill : "black"
            });

            $("#paper1").mousemove(function(event){
                cursorY=event.pageY;
                cursorX=event.pageX;
            });

            function erase() {
                if (!mouseStillDown) { return; }                                
                paper.rect(cursorX-25,cursorY-25,50,50).attr({
                   fill :"white",
                   stroke : "white"
                });

                if (mouseStillDown) { setInterval("erase", 100); }
            }

            $("#paper1").mousedown(function(event) {
                mouseStillDown = true;
                erase(event.pageX,event.pageY);
            });

            $("#paper1").mouseup(function(event) {
                mouseStillDown = false;
            });

在这里，每次单击时，它会在光标位置创建一个白色矩形。

这里是代码的小提琴：http://jsfiddle.net/c6Xs6/

通过一些修改，您可以创建一个菜单，允许用户选择您用于＆＃34;擦除＆＃34;的表单的大小和形状。或多或少的东西：http://jsfiddle.net/8ABe9/

您还可以使用光标后面的div来准确显示＆＃34;橡皮擦＆＃34;会被画出来。

希望能帮到你:)。

删除raphael对象的方法

2 个答案: