Как выбрать объект в kinetic.js?

Я пытаюсь создать редактор, который можно использовать для рисования фигур с использованием блоков с использованием рамки kineticjs. Пока все было хорошо. Я могу добавить прямоугольник, изменить его размер и повернуть его. Но то, что я сказал, работает только на последнем созданном объекте. Я не могу выбрать один из них для изменения. Вот HTML кода:Как выбрать объект в kinetic.js?

<style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
     canvas { 
     border: 1px solid #9C9898; 
     } 
    </style> 
    </head> 
    <body> 
    <table width="800" border="0"> 
     <tr> 
     <td colspan="2" style="background-color:#eeeeee;"> 
     </td> 
     </tr> 
     <tr> 
     <td style="background-color:#eeeeee;height:200px;width:400px;"> 
      <button id="rect">Rectangle</button><br> 
      <button id="small">Small</button><br> 
      <button id="big">Big</button><br> 
      <button id="rotate">RotateRight</button><br> 
      <button id="rotate2">RotateLeft</button><br> 
      <button id="delete">Delete</button><br> 
     </td> 
     <td> 
      <div id="container"></div> 
      <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script> 

      <script type="text/javascript" src="example_kinetic.js"></script> 

     </td> 
     </tr> 
     <tr> 
     <td colspan="2" style="background-color:#eeeeee;text-align:center;"> 
     Copyright © ceng314animation.wordpress.com/</td> 
     </tr> 
    </table> 

    </body> 
</html>

И это часть JS:

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 800, 
    height: 400 
    }); 

    var layer = new Kinetic.Layer(); 
    stage.add(layer); 
    boardBlankArray = []; 
    var rect, myRect; 
    var i = 1; 


    document.getElementById('rect').addEventListener('click', function() { 
    rect = new Kinetic.Rect({ 
    x: 239, 
    y: 75, 
    width: 100, 
    height: 50, 
    fill: 'green', 
    stroke: 'black', 
    strokeWidth: 4, 
    offset: [50,25], 
    draggable: true, 
    id:"rect"+i 
    }); 
    i=i+1; 

    rect.setListening(true); 

    boardBlankArray[i] = rect; 
    // add the shape to the layer 
    layer.add(boardBlankArray[i]); 
    stage.add(layer); 
    boardBlankArray[i].on("click",function(){ 
     alert(this.attrs.id); 
     //myRect = stage.getChildren()[i]; 
    }); 
    }, false); 


    document.getElementById('big').addEventListener('click', function(){ 

    rect.setWidth(rect.getWidth()+10); 
    rect.setHeight(rect.getHeight()+10); 
    rect.setListening(true); 
    stage.add(layer); 
    }, false); 

    document.getElementById('small').addEventListener('click', function() { 
    rect.setListening(true); 
    rect.setWidth(rect.getWidth()-10); 
    rect.setHeight(rect.getHeight()-10); 
    stage.add(layer); 
    }, false); 

    document.getElementById('rotate').addEventListener('click', function() { 
    rect.setListening(true); 
    rect.rotate(Math.PI/4); 
    stage.add(layer); 
    }, false); 

    document.getElementById('rotate2').addEventListener('click', function() { 
    rect.setListening(true); 
    rect.rotate(-Math.PI/4); 
    stage.add(layer); 
    }, false); 


    document.getElementById('delete').addEventListener('click', function() { 
    layer.remove(rect); 
    stage.add(layer); 
    }, false);

источник

2013-03-09 user1422167

При нажатии на прямоугольнике вы должны сделать это активный прямоугольник. Используйте myrect в качестве переменной для текущего активного прямоугольника

Внести следующие изменения в свой код, идентифицированные с // < < < < < < < < < < < < < < < < < < < < <

Примечания доскаBlankArray не требуется

document.getElementById('rect').addEventListener('click', function() { 
    rect = new Kinetic.Rect({ 
    x: 239, 
    y: 75, 
    width: 100, 
    height: 50, 
    fill: 'green', 
    stroke: 'black', 
    strokeWidth: 4, 
    offset: [50,25], 
    draggable: true, 
    id:"rect"+i 
    }); 
    i=i+1; 

    myrect=rect //<<<<<<<<<<<<<<sets recently created rectangle as active 
    rect.setListening(true); 

    // add the shape to the layer 
    layer.add(rect); 
    stage.add(layer); 
    rect.on("click",function(){ //<<<<<<<<<<< 
     myRect = this; //<<<<<<<<<<<<<<<<<<<<<< sets clicked on rectangle as active 
    }); 
    }, false); 


    document.getElementById('big').addEventListener('click', function(){ 

    myrect.setWidth(myrect.getWidth()+10); //<<<<<<<<<uses currently active rectangle 
    myrect.setHeight(myrect.getHeight()+10); //<<<<<<<uses currently active rectangle 
    myrect.setListening(true); 
    stage.add(layer); 
    }, false);

Вы должны изменить Прямоугольник для myrect во всех следующих вызовы функций

источник

2013-03-10 10:43:11 jing3142

спасибо. Я собираюсь задать еще одну вещь: document.getElementById ('delete'). AddEventListener ('click', function() { layer.remove (myRect); stage.добавление (слой); }, false); 'Этот код должен удалять выбранный прямоугольник, но он удаляет все из них. Вы знаете, почему? – user1422167

Попробуйте изменить layer.remove (myRect) на myRect.remove(); Кстати, хорошая форма задавать новый вопрос, а не спрашивать в комментарии. Вы всегда можете перенаправить свой новый вопрос в комментарии для предыдущего вопроса. Рад помочь. Проверьте http://stackoverflow.com/questions/12757176/removing-objects-from-a-layer-using-kineticjs – jing3142

Похоже @ jing3142 Ответим работал @ user1422167, но я хотел бы опубликовать этот ответ здесь, как другой ответ использует нетрадиционного подход к выбору узла в KineticJS.

В KineticJS способ выбора узла будет использовать:

event.targetNode

Источник: http://www.html5canvastutorials.com/kineticjs/html5-canvas-get-event-shape-with-kineticjs/

layer.on('click', function(evt) { 
    // get the shape that was clicked on 
    var shape = evt.targetNode; 
    alert('you clicked on \"' + shape.getName() + '\"'); 
    });

Использование var shape = evt.targetNode;, вы можете вызвать все ваши методы KineticJS на Кинетический узел. В этом примере учебник вызывает метод getName: shape.getName().

Кроме того, больше о KineticJS событий здесь: http://www.html5canvastutorials.com/kineticjs/html5-canvas-path-mouseover/

UPDATE

KineticJS 5.0.1 и до

var shape = evt.targetNode;

KineticJS 5.1.0+

var shape = evt.target;

источник

2013-07-23 14:55:24 projeqht

Это обновление было обновлено до 'evt.target' в Kineticjs 5.1.0. [Это упоминается в примечаниях к выпуску.] (Https://github.com/ericdrowell/KineticJS/releases/tag/v5.1.0) –

Как выбрать объект в kinetic.js?

ответ

Смежные вопросы