1

当我单击一个形状并且删除单选按钮为“真”时，我想删除它。目前我只能删除整篇 Raphael 论文。有人可以帮助我吗？我使用 RaphaelJS 和 Jquery。

HTML

<html lang="en" style="height: 100%;">
<head>
    <script src="raphael-min.js" type="text/javascript"></script>
    <script src="jquery-min.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
</head>
<body>
    <input type='radio' id='un' name="action" value="un">draw un</button>
    <input type='radio' id='deux' name="action" value="deux">draw deux</button>
    <input type="radio" id='remove' name="action" value="remove"> remove


  <div id="holder">
  </div>

</body>
</html>

JS 

$(document).ready(function() {
      var paper = Raphael('holder', '800', '600');
      var mySet = paper.set();

      var tojsonplease =        [
            {
                category: 'playground',
                type: "rect",
                x: 10,
                y: 10,
                width: 600,
                height: 300,
                fill: "#eee"
            }];
        paper.add(tojsonplease);      

        addme = function(cat, myX, myY) {
            switch (cat) 
            { 
            case '1' : 
            specs = {
                category: '1',
                type: 'rect',
                x: myX,
                y: myY,
                width: 20,
                height: 20,
                fill: 'yellow'
            };
            break; 
            case '2': 
            specs = {
                category: '2',
                type: 'rect',
                x: myX,
                y: myY,
                width: 10,
                height: 20,
                fill: 'red'
            };  
            break;
            }
            var newElement = new Array();
                newElement[0] = specs;
            tojsonplease.push(specs);
            paper.add(newElement);
            console.log(tojsonplease);
        };

        $('#holder').click(function () {


            if ($("#remove").is(":checked")) {
                paper.remove();
            };
            if ($("#deux").is(":checked")) {
                SX = event.pageX - $(document).scrollLeft() - $('#holder').offset().left;
                SY = event.pageY - $(document).scrollTop() - $('#holder').offset().top;
                addme('1', SX, SY);
            };
            if ($("#un").is(":checked")) {
                SX = event.pageX - $(document).scrollLeft() - $('#holder').offset().left;
                SY = event.pageY - $(document).scrollTop() - $('#holder').offset().top;
                addme('2', SX, SY);
            };


            }); 
    });
4

1 回答 1

3

通常，您使用以下方法删除形状element.remove()：

var element = paper.rect(100,100,100,100);
element.remove() // this removes the element

不要这样做：

if ($("#remove").is(":checked")) 
    paper.remove();

这将删除所有内容，只需删除我上面显示的元素。

您应该分配ids给您的元素，这将帮助您使用Paper.getById(id)功能。您将能够获得需要删除的确切元素。

看看工作演示

var paper = Raphael("holder",500,500);
var which_one_to_remove = -1;

// use data() to assign ids that correspond to the order
// in which you push() the elements into the array object
var c1 = paper.circle(100, 100, 80).attr({fill:'red'}).data('id', '0');
var c2 = paper.circle(200, 200, 80).attr({fill:'yellow'}).data('id', '1');
var c3 = paper.circle(300, 300, 80).attr({fill:'blue'}).data('id', '2');

var elements = [];
elements.push(c1);
elements.push(c2);
elements.push(c3);

c1.click(function()
{
    which_one_to_remove = this.data('id');
});
c2.click(function()
{
    which_one_to_remove = this.data('id');
});
c3.click(function()
{
    which_one_to_remove = this.data('id');
});

$('#holder').click(function () {
    if ($("#remove").is(":checked")) 
    {
        elements[which_one_to_remove].remove();
    };
});
于 2013-08-08T06:45:06.067 回答