Kinetic JS — проблема с наслоением

У меня два разных этапа поверх другого. И я добавляю к ним слои и размещаю два объекта изображения.

Теперь я дал событие «щелчок» этим объектам изображения.

Однако, поскольку недавно добавленный слой находится поверх других слоев, только верхний слой инициирует события.

Проблема . При нажатии на фиолетовый индикатор появляется предупреждение. Но желтый индикатор не вызывает никаких событий, так как он находится за слоем.

(Проверьте JSFiddle ссылку внизу)

Как побороть эту проблему..?

Вот пример кода, который я использую для добавления и размещения изображения.

Рабочая ссылка JS Fiddle: http://jsfiddle.net/v4u2chat/aqf9Y/ 8/

ПРИМЕЧАНИЕ. Используйте ползунок, чтобы изменить положение изображения.

Код позиционирования изображения

$function positionImage(stage,centerX,centerY,radius,startingAngle,endingAngle,targetValue4ImagePositioning,divIdvalue)
    {
        var imgLayer        =   new Kinetic.Layer();
        var angleInDegress  =   360*targetValue4ImagePositioning-90-5;
        var angleInRadians  =   (Math.PI/180)*angleInDegress;

        imgLayer.rotate((Math.PI/180)*(360*targetValue4ImagePositioning));

        var arcEndX   =   centerX+ ((radius+25)*Math.cos(angleInRadians));
        var arcEndY   =   centerY+ ((radius+25)*Math.sin(angleInRadians));

        imgLayer.setX(arcEndX);
        imgLayer.setY(arcEndY);

        var kineticImage = new Kinetic.Image(
        {  
            x: 0
            ,y: 0
            ,width:18
            ,height:22
            ,image: $('#'+divIdvalue)[0]
            ,id:'kineticImage_'+divIdvalue

        });
        kineticImage.on("click", callBackFn);

        imgLayer.add(kineticImage);
        stage.add(imgLayer);

  }

canvas html kineticjs
person v4u2chat    schedule 30.04.2012    source источник
comment
Не могли бы вы нарисовать оба изображения на одном слое?   -  person Steve Greatrex    schedule 30.04.2012
comment
@SteveGreatrex ваш jsfiddle не содержит желтых или фиолетовых индикаторов. К сожалению, мне нужно понять этот код.   -  person Sahar Ch.    schedule 16.07.2014
comment
Эй, @Эльза, это не моя скрипка - уточни на v4u2chat   -  person Steve Greatrex    schedule 16.07.2014
comment
О, извините, я хотел отметить @v4u2chat :p   -  person Sahar Ch.    schedule 16.07.2014

Ответы (1)


arrow_upward
1
arrow_downward

Спасибо **Steve** за ваш вклад.

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

Теперь я изменил свой код на одиночный этап, и он работает как шарм :)

Слой не будет занимать всю область холста. Он будет занимать только ту область фигуры, для которой мы создали слой. Итак, никакой суеты или проблем со слоями.

Обновленный JS Fiddle можно найти по указанной ниже ссылке.

http://jsfiddle.net/v4u2chat/aqf9Y/9/

person v4u2chat    schedule 01.05.2012