Raphael JS使子集可以有选择地单击 [英] Raphael JS making sub-sets selectively clickable

问题描述

所以我有一篇论文，其中包含6种符号.每个符号都是圆和路径的集合.我只想使某些圈子可点击以拖动集合. 例如，如果一个符号有2个圆圈和一个路径-我希望能够单击其中一个圆圈来拖放集合(已被详细记录的东西).如果用户单击另一个圆圈-则不会发生任何事情. 由于我的Raphael元素是由用户动态创建的-我将创建的每个集合推到数组上.我可以访问集合中的特定圆并使它在集合数组中可点击吗?

So I have a paper that has 6 types of symbols. Each symbol is a collection of circles and paths. I only want to make some of circles clickable to drag the set. For example, if a symbol has 2 circles and a path - I want to be able to click one of the circles to drag and drop the set(something that has been well documented). If the user clicks the other circle - nothing should happen. Since my Raphael elements are created dynamically by the user - I push each set as it's created onto an array. Is it possible for me to access the particular circle in the set and make it clickable through the array of sets?

这是我插入集合的方式

{
paper.setStart();
    var circ = paper.circle(x,y,35); //first circle - should be clickable
    var conpoints = insConPoint1(paper,x,y);
    var pathright = conpoints.path;
    var conPoint1 = conpoints.conpoint; //this is a second circle - should not be clickable
var st = paper.setFinish();
symbolarray.push(st);
}

这也是我使布景可拖动的方式

Also here's how I make the sets draggable

function dragger(){
    this.dx = this.dy = 0;

};

function mover(s){
    return function(dx, dy){
        (s|| this).translate(dx-this.dx, dy-this.dy);
        this.dx = dx;
        this.dy = dy;
    }
};
for(var i = 0; i<symbolcount;i++){
    symbolarray[i].drag(mover(symbolarray[i]), dragger);    
}

推荐答案

没问题.有两种方法可以做到:

No problem. Two ways you can do it:

如果只有一个圆圈是可拖动的，只需将拖动事件附加到该圆圈，然后在集合上调用平移，而不是在this上调用(即使拖动侦听器为由于它是动态的，因此您可以使用Raphael的.data()函数找到适当的集合，该函数

If it's only ever one circle that's draggable, just attach the drag event to that circle, but call the translate on the set, not on this (which will always refer to the individual element, even if the drag listener is attached to the set object.) Since this is dynamic, you can find the appropriate set using Raphael's .data() function, which adds key value pairs to an object, like so:

paper.setStart();
    var circ1 = paper.circle(100,100,35); //first circle - should be clickable
    var circ2 = paper.circle(50,50,25); // second circle - not clickable
var st = paper.setFinish();
st.data("myset", st);

st.click(function(e) {
   //returns the parent set
   console.log(this.data("myset")); 
});

然后，您只需调用翻译事件-顺便说一句，由于有机会放弃翻译，因此您应该适应this.data("myset")

Then you just call the translate events--and btw, you should adapt to transform() when you get a chance, since translate is deprecated--on the result of this.data("myset")

如果集合中的多个对象是可拖动的，那么您可以做一些稍微不同的事情: 如果要拖动对象，请使用.data()向对象添加"candrag"属性.然后，在拖动集合时检查该值，并且仅在单击的对象对此值具有"true"的情况下才变换(也称为转换)该集合.相似的想法.

If multiple objects in the set are draggable, then you can do something slightly different: Use .data() to add a "candrag" property to objects that is true if you want them to be dragged. Then check this value when the set is dragged and only transform (aka translate) the set if the object clicked has "true" for this value. Similar idea.

这篇关于Raphael JS使子集可以有选择地单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！