jquery - RaphaelJS remove element on click -
i'd remove shape when click on , if delete radio button "true". i'm able delete whole raphael paper. can me ? use 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); }; }); });
usually remove shape using element.remove():
var element = paper.rect(100,100,100,100); element.remove() // removes element do not this:
if ($("#remove").is(":checked")) paper.remove(); this remove everything, remove element showed above.
you should assign ids elements, use paper.getbyid(id) function. able exact element need remove.
var paper = raphael("holder",500,500); var which_one_to_remove = -1; // use data() assign ids correspond order // in push() elements 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(); }; });
Comments
Post a Comment