Sự kiện onclick cho trực tràng sử dụng Raphaeljs

Question

Tôi đang cố gắng vẽ một hình chữ nhật đơn giản với một số văn bản trên đó. Vì một hình dạng không thể có văn bản trên nó, tôi đang tạo một tập hợp với các tọa độ tương tự cho văn bản và các đối tượng rect. Tôi cần phải thay đổi một cái gì đó trên sự kiện onclick. Do đó, tôi đã sử dụng câu lệnh obj.node.onclick = và viết một trình xử lý. Vấn đề của tôi là nếu đối tượng văn bản được sử dụng cho onclick thì trình xử lý sự kiện chỉ được gọi nếu tôi nhấp vào văn bản. Nếu tôi sử dụng rect cho onclick tôi phải bấm vào khu vực biên giới mà thôi. Yêu cầu của tôi là nhấp chuột có thể xuất hiện trên toàn bộ khu vực của hình dạng cùng với văn bản trong đó.

var paper = Raphael(10, 10, 320, 200); 
var group = paper.set(); 
var c1 = paper.path("M35 60 L35 90"); 
var c2 = paper.rect(10, 10, 50, 50,10); 
group.push(c2); 
group.push(paper.text(35, 35, "Hello")); 

c2.attr("fill", "blue"); 
c2.node.onclick = function() { c2.attr("fill", "red");}; 

Tôi đã cố gắng sử dụng div để phủ lên trực tràng và viết văn bản trên đó nhưng không thành công. Tôi có thể nhìn thấy div trong firebug nhưng không phải trên trang web! Tôi đã cho nó thuộc tính phong cách cho chiều rộng và chiều cao trên cùng bên trái cũng như đã nêu vị trí tuyệt đối. Nhưng không thành công.

Hãy giúp tôi với điều này. Bất kỳ trợ giúp nào được đánh giá cao! Kavita

Tôi đã thử sử dụng giải pháp lớp phủ mặt trước. Tôi nhân bản backlayer và thêm một trình xử lý nhấn vào nó. Tôi không sử dụng 'điều này' chút nào. Sự kiện không bao giờ bị sa thải! Xin hãy giúp tôi với điều này! Kavita

Answer 1

Điều gì về việc sử dụng cùng một trình xử lý cho văn bản và điều chỉnh, sử dụng fill-opacity trong số 0?

Answer 2

Dưới đây là hai cách để thực hiện việc này. Trong cả hai, tôi chỉ cần thêm một onclick cho văn bản. Nói cách khác, có cùng một onclick cho hình chữ nhật và cho văn bản.

1) Chỉ cần thêm dòng này vào cuối

group[group.length - 1].node.onclick = function() { c2.attr("fill", "red");}; 

2) Hoặc, bạn có thể tạo một c3 biến, như c2, và đính kèm các onclick theo cùng một cách. Đây là cách tất cả các mã của bạn sẽ xem xét.

var paper = Raphael(10, 10, 320, 200); 
var group = paper.set(); 
var c1 = paper.path("M35 60 L35 90"); 
var c2 = paper.rect(10, 10, 50, 50,10); 
var c3 = paper.text(35, 35, "Hello").attr({"font-size":36}); 
group.push(c2); 
group.push(c3); 

c2.attr("fill", "blue"); 
c2.node.onclick = function() { c2.attr("fill", "red");}; 
c3.node.onclick = function() { c2.attr("fill", "red");}; 

Tôi đã tạo văn bản rất lớn ở đây để bạn có thể chắc chắn bạn đang nhấp vào văn bản chứ không phải hình chữ nhật.

Answer 3

Thật tuyệt khi thực sự cung cấp đối tượng lớp 3 vì bạn có thể tô màu lớp mặt sau theo cách bạn muốn. Lớp phía trước có cùng hình dạng với lớp mặt sau của bạn nhưng nó có độ mờ bằng 0 để bạn có thể thấy văn bản trên lớp ở giữa. Tôi cũng không thích sử dụng nút để xử lý sự kiện nhưng cơ chế xử lý sự kiện Raphael nguyên bản sẵn có. Ví dụ dưới đây được lấy từ một trong các ví dụ trên trang web của tôi, tôi đã cắt nó xuống sâu hơn để nó dễ hiểu hơn. Cũng lưu ý rằng nó là một nút được tạo thành từ một vòng tròn lớp trước và sau với một văn bản kẹp giữa hai lớp. Chúng có thể dễ dàng là hình chữ nhật/hình chữ nhật tròn. Chức năng bao gồm các màu đảo ngược khi di chuột qua/di chuột ...

button = function (paper, xpos, ypos, r, labeltext) 
{ 

this.backLayer = paper.circle(xpos, ypos, r).attr({ fill: "#FFFF00", 'fill-opacity': 0 , stroke: "#FF0000",'stroke-width':5, 'stroke-opacity':0}); 

/*The text automatically centres itself as this is the default text positioning for Raphael text*/ 
this.label = paper.text(xpos, ypos, labeltext).attr({fill:'#ff0000', 'font-size':18}); 

/*Now we make a copy for the front layer and we also make the back layer opaque. So that you can see it's yellow fill*/ 
this.frontLayer = this.backLayer.clone(); 
this.backLayer.attr({'fill-opacity': 1, 'stroke-opacity':1}); 

/*Now make the back layer and the text referencable for the mouseover, mouseout and click event of the front layer*/ 
this.frontLayer.backLayer= this.backLayer; 
this.frontLayer.label = this.label; 

/*Add a preferred cursor by referencing the underlying DOM object of the frontLayer*/ 
this.frontLayer.node.style.cursor = 'pointer'; 

/*Now you can interact with the lower layers behind the invisible covering layer (frontLayer) in it's event methods*/ 
this.frontLayer.mouseover(
function (e) { 
    this.backLayer.animate({ fill: "#FF0000", stroke: "#FFFF00" }, 1000); 
    this.label.animate({ fill: "#FFFF00" }, 1000); 
    } 
); 
this.frontLayer.mouseout(
function (e) { 
    this.backLayer.animate({ fill: "#FFFF00", stroke: "#FF0000" }, 1000); 
    this.label.animate({ fill: "#FF0000" }, 1000); 
    } 
); 
this.frontLayer.click(  
function (e) { 
     alert("Creating loads of custom buttons is easy\n\nYou made this one with the following specification:\n"+ 
     "Button Text  : "+this.label.attr("text")+"\n"+ 
     "Button Centre @ X: "+this.backLayer.attr("cx")+"\n"+ 
     "Button Centre @ Y: "+this.backLayer.attr("cy")+"\n"+ 
     "Button Radius : "+this.backLayer.attr("r")); 
    } 

); 
} 
/*Create the button*/ 
rappyButton = new button(paper, 250, 200, 75, "Raphael"); 

Hy vọng điều đó sẽ hữu ích.

Answer 4

Bạn đã sử dụng thuộc tính set của Raphael (http://raphaeljs.com/reference.html#set). Bạn đã thử thêm onclick vào đó chưa?

group.click(function(event) { 
    c2.attr({fill: "red"}); 
}); 

Answer 5

Tạo bộ cho tất cả các thành phần trong nút. Sau đó, thêm trình xử lý nhấp chuột (hoặc mouseup) vào nhóm.Lưu ý rằng rects phải có một điền, nếu không họ không nhận được sự kiện chuột. Đối với một nút trong suốt sử dụng opacity 0.

var paper = Raphael(10, 10, 320, 200); 
var group = paper.set(); 
var COLOR_NORMAL = 'blue'; 
var COLOR_HOVER = 'red'; 
var background = paper.rect(10, 10, 50, 50,10).attr({ 
    fill: COLOR_NORMAL 
}); 
var label = paper.text(35, 35, "Hello"); 

group.push(background); 
group.push(label); 

group.attr({ 
    cursor: 'pointer', 
}).mouseover(function(e) { 
    background.attr('fill', COLOR_HOVER); 
}).mouseout(function(e) { 
    background.attr('fill', COLOR_NORMAL); 
}).mouseup(function(e) { 
    alert("clicked"); 
}); 

Answer 6

onmousedown làm việc cho tôi trong IE 7,8 và 9

  st[0].onclick = function() { 
       myFunc(dataObj); 
       st.toFront(); 
       R.safari(); 
      }; 
      st[0].onmousedown = function() { 
       myFunc(dataObj); 
       st.toFront(); 
       R.safari(); 
      }; 

Tôi đã thử một số phương pháp khác là tốt, trừu tượng hóa các chức năng để một biến nhưng nó không làm việc. Trong trường hợp của tôi, tôi không thể thêm một hình chữ nhật vào màn hình và có người bấm vào đây, nó là một giải pháp kém vì nhiều lý do.

Hy vọng điều này sẽ hữu ích!

Answer 7

Cân nhắc bỏ qua các sự kiện con trỏ trên các nút văn bản và cho phép chúng đi qua trực tiếp gốc.

svg text { 
    pointer-events: none; 
}