Как придать элементу изображения «выделенный» вид, используя Raphael.js - PullRequest
Новая
       2

Как придать элементу изображения «выделенный» вид, используя Raphael.js

2 голосов
/ 03 апреля 2012

Я использую Raphael.js для рисования изображений на холсте.Мне нужно иметь возможность выбрать определенные элементы изображения (это я могу сделать) и сделать их похожими на выбранные (это проблема).

До Raphael.js я использовал обычный холст Html5 и простые прямоугольники.Было просто удалить выбранный прямоугольник и нарисовать новый с другим цветом в том же месте.

Но теперь, когда я использую изображения, это другая история.Я использую изображение здесь .Это маленький gif.

Итак, вопрос (ы):

  1. Есть ли простой способ программно изменить цвет элемента изображения Raphael.js?
  2. Можно ли заставить элемент изображения мигать, изменив его непрозрачность?

Единственное требование - выбранный элемент должен быть подвижным.

Код для рисования изображения, когда пользователь нажимает на холст: 

var NodeImage = RCanvas.image("../vci3/images/valaisin.gif", position.x, position.y, 30, 30);           
NodeImage.toFront();
RSet.push(NodeImage);
NodeImage.node.id = 'lamp';
NodeImage.node.name = name;
NodeImage.click(function() {
    console.log("Clicked on node " + NodeImage.node.name);  
    // Here should be the code that blinks or changes color or does something else
});

Это совершенно плохая идея?Есть ли лучший способ достичь моей цели?

1 Ответ

3 голосов
/ 04 апреля 2012

Я бы предложил предоставить image с opacity некоторого уровня и присвоить ему значение 1 при нажатии: 

NodeImage.attr('opacity', 0.6);
// ...
NodeImage.click(function() {
    this.attr('opacity', 1);
});

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

// keep all selectable shapes in a group to easily manage them
var selectableShapesArray = [NodeImage, otherNodeImage, anotherSelectableShape];

// define the behavior for shape click event
var clickHandler = function() {
    for (var i in selectableShapesArray) {
        var image = selectableShapesArray[i];
        if (image.selected) {
            image.attr('opacity', .6);
            image.selected = false;
            break;
        }
    }
    this.attr('opacity', 1);
    this.selected = true;
}

// attach this behavior as a click handler to each shape
for (var i in selectableShapesArray) {
    var shape = selectableShapesArray[i];
    shape.click(clickHandler);
}​
...