当前位置：文江博客话题详情

Raphael.js，如何选择元素？

发布于 2024-11-05 23:44:46 字数 85 浏览 0 评论 0原文

在 Raphael,js 中，如何选择元素？例如，如果我有一个矩形，如何选择它？在Raphael中，有没有办法像使用jQuery选择DOM元素一样选择元素？

原文

分享到QQ

分享到微博

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

发布评论

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

谁许谁一生繁华 2024-11-12 23:44:46

要选择一个 svg DOM 元素，假设 raphael 元素的节点有一个 ID，您可以通过 $('#ID') 在 'jQuery' 模式下完成，或者以 'native' 方式完成document.getElementById('ID')。

而且，使用raphael处理事件非常简单，例如当你点击一个矩形时你可以“选择”它，这样（演示在这里=> http://jsfiddle.net/steweb/zMYU8/):

标记:

<div id="canvas"></div>

js:

var selected = null; //var to store selected element

//initialize the raphael canvas and store it in a var
var canvas = Raphael(document.getElementById("canvas"), 320, 200);

//first rectangle
var r = canvas.rect(10, 10, 50, 50).attr("fill", "#FFFF22");

//second rectangle
var r1 = canvas.rect(70, 70, 50, 50).attr("fill", "#FFFF22");

//first rectangle click
r.click(function(){
  //change attributes
  r1.attr("stroke","black");  
  r.attr("stroke","green");
  selected = r; //update selected var
});

//second rectangle click
r1.click(function(){
  //change attributes
  r.attr("stroke","black");  
  r1.attr("stroke","green");
  selected = r1; //update selected var
});

To select an svg DOM element, supposing a node of the raphael element has an ID, you can do it in the 'jQuery' mode by $('#ID') or in the 'native' way document.getElementById('ID').

Moreover, using raphael handling events is very simple, for example when you click on a rectangle you can 'select' it, in this way (demo here => http://jsfiddle.net/steweb/zMYU8/):

markup:

<div id="canvas"></div>

js:

var selected = null; //var to store selected element

//initialize the raphael canvas and store it in a var
var canvas = Raphael(document.getElementById("canvas"), 320, 200);

//first rectangle
var r = canvas.rect(10, 10, 50, 50).attr("fill", "#FFFF22");

//second rectangle
var r1 = canvas.rect(70, 70, 50, 50).attr("fill", "#FFFF22");

//first rectangle click
r.click(function(){
  //change attributes
  r1.attr("stroke","black");  
  r.attr("stroke","green");
  selected = r; //update selected var
});

//second rectangle click
r1.click(function(){
  //change attributes
  r.attr("stroke","black");  
  r1.attr("stroke","green");
  selected = r1; //update selected var
});

回复收藏 0 原文

~没有更多了~