Событие Onclick для прямоугольника с использованием Raphaeljs

Question

Я пытаюсь нарисовать простой прямоугольник с текстом на нем. Поскольку на фигуре не может быть текста, я создаю набор с одинаковыми координатами для текста и прямоугольных объектов. Мне нужно что-то изменить на событии onclick. Поэтому я использовал оператор obj.node.onclick = и написал обработчик. Моя проблема заключается в том, что если текстовый объект используется для щелчка мышью, то обработчик события вызывается, только если я нажимаю на текст. Если я использую прямоугольник для onclick, я должен щелкнуть только в области границы. Мое требование состоит в том, чтобы щелчок мог прийти по всей области фигуры вместе с текстом в ней.

   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");}; 

Я пытался использовать div для наложения на прямоугольник и писать текст на нем, но безуспешно. Я могу видеть div в firebug, но не на веб-странице! Я дал ему свойства стиля для верхней левой ширины и высоты, а также указал абсолютную позицию. Но безуспешно.

Пожалуйста, помогите мне с этим. Любая помощь приветствуется! Kavita

Я попытался использовать решение для переднего слоя backlayer. Я клонировал задний слой и добавил к нему обработчик щелчков. Я не использовал «это» вообще. Событие никогда не было запущено! Пожалуйста, помогите мне с этим! Kavita

Answer 1

Создать набор для всех элементов в кнопке. Затем добавьте обработчик щелчка (или mouseup) в группу. Обратите внимание, что ренты должны иметь заливку, иначе они не получат события мыши. Для прозрачной кнопки используйте непрозрачность 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 2

Хорошо на самом деле предоставить трехслойный объект, потому что вы можете раскрасить задний слой, как вам нравится.Передний слой имеет ту же форму, что и задний слой, но имеет непрозрачность, равную нулю, так что вы можете видеть текст на среднем слое.Мне также не нравится использовать узел для обработки событий, но имеется встроенный механизм обработки событий Raphael.Приведенный ниже пример взят из одного из примеров на моем веб-сайте, я сократил его еще больше, чтобы его было легче понять.Также обратите внимание, что это кнопка, состоящая из круга переднего и заднего слоев с текстом, помещенным между двумя слоями.Они также могут быть прямоугольниками / прямоугольниками с закругленными углами.Функциональность включает инвертирование цветов при наведении курсора мыши / мышке ...

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");

Надеюсь, что помогло.

Answer 3

Вот два способа сделать это. В обоих из них я просто добавляю щелчок для текста. Другими словами, иметь одинаковые щелчки для прямоугольника и для текста.

1) Просто добавьте эту строку в конце

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

2) Или вы можете создать другую переменную c3, например, c2, и таким же образом прикрепить клик. Вот как будет выглядеть весь ваш код.

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");};

Я сделал текст здесь очень большим, чтобы вы могли быть уверены, что нажимаете на текст, а не на прямоугольник.

Answer 4

Вы использовали свойство set Рафаэля (http://raphaeljs.com/reference.html#set). Вы пытались добавить к этому onclick?

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

Answer 5

Как насчет использования одного и того же обработчика для текста и прямоугольника, используя fill-opacity, равный 0?

Answer 6

Попробуйте просто игнорировать события указателя на текстовых узлах и пропустить их до родительского прямоугольника.

svg text {
    pointer-events: none;
}

Answer 7

onmousedown работал для меня в IE 7,8 и 9

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

Я пробовал и другие методы, абстрагируя функцию от переменной, но она не работала.В моем случае я не могу добавить прямоугольник на дисплей и заставлять людей нажимать на него, это было плохое решение по нескольким причинам.

Надеюсь, это поможет!