Encontre a posição dos objetos na tela

Question

Estou arrastando e soltando uma imagem de uma barra de ferramentas em uma tela. O usuário pode arrastar e soltar a mesma imagem da barra de ferramentas várias vezes. O usuário também pode remover um objeto específico com um clique duplo, conforme mostrado no link abaixo.

http://jsfiddle.net/gkefk/26/

Quero registrar a posição desses objetos no carregamento da página e também depois de movê-los na tela. Para isso estou adicionando um ouvinte de eventos e uma função que mostrará as posições de todos os objetos ao clicar no botão

myButton.addEventListener('click', position);

A função JS usada para calcular a posição dos objetos.

function Rectangle(props) {
    var posX = this.posX = props.x;
    var posY = this.posY = props.y;

    this.width = props.width;
    this.height = props.height;
    this.fill = props.fill;
    this.isDragging = props.isDragging;

    this.draw = function() {
        ctx.fillStyle = this.fill;
        ctx.fillRect(this.posX, this.posY, this.width, this.height);

    }
}

Mesmo adicionando a função JS acima, não estou obtendo a saída ao clicar no botão. Não sei onde estou errando... Existe uma maneira mais simples de fazer isso em jQuery?

O link contendo a função JS acima

http://jsfiddle.net/gkefk/27/

Answer 1

Reserve alguns minutos para revisar o que você reuniu.

Sua barra de ferramentas superior contém elementos DOM arrastáveis.

Depois que qualquer elemento DOM arrastável for lançado no Kinetic Canvas, você estará criando um novo Kinetic.Image no mesmo local do elemento DOM descartado.Este Kinetic.Image não pode ser acessado pelo jQuery porque não é um elemento DOM - é um nó Kinetic.Image.

Portanto, você deve acessar esse novo Kinetic.Image usando KineticJS, não jQuery.

Em seu dragDrop, você dá ao Kinetic.Image um name propriedade.KineticJS name propriedades são como classes em HTML/CSS.Isso significa que se arrastar mais de 1 imagem para a tela, você terá 2 imagens com o mesmo name.Provavelmente não é isso que você pretende.

Também o name você está atribuindo a cada Kinetic.Image um "house.png" que você busca na propriedade de dados "url" do elemento drop.Provavelmente não é isso que você pretende.

Em vez disso, se você atribuir a cada um dos seus novos Kinetic.Images um nome exclusivo id propriedade, então você pode usar stage.find para obter o Kinetic.Image específico com um especificado id.O Cinético id propriedade é como o HTML/CSS id propriedade.Então você pode obter qualquer Kinetic.Image x, y, largura, altura desejada assim:

var myDesiredKineticImage = stage.find("#"+myDesiredId);

var x=myDesiredKineticImage.x();
var y=myDesiredKineticImage.y();
var width=myDesiredKineticImage.width();
var height=myDesiredKineticImage.height());