Converter forma em grupo

Question

Estou tendo diferentes SHApes no meu palco e gostaria de torná-los redimensionáveis ​​quando selecionados.

Pensei em "converter" a forma em um grupo e adicionar redimensionadores a ela.Quando o SHApe estiver desmarcado, eu poderia remover os redimensionadores e, em seguida, remover a forma do grupo e adicioná-la de volta ao pai antigo.

Eu tentei isso, e realmente não funciona, pois a origem das coordenadas muda para o Shape e se tiver um dragBoundFunc é pior.Portanto, parece dar muito trabalho e parece errado.Achei que deveria haver uma abordagem melhor para algo assim, que provavelmente é amplamente difundido.

Então, minha pergunta é: qual é a melhor maneira de adicionar redimensionadores a uma forma existente instantaneamente e removê-los quando a forma não estiver mais selecionada?

Answer 1

Concordo, o redimensionamento de "âncoras" é visualmente desagradável e complexo para codificar

Adicionar redimensionadores separados a uma imagem é visualmente estranho

(as janelas do sistema operacional não adicionam redimensionadores de aparência desajeitada para permitir o redimensionamento).

Adicionar redimensionadores separados também fica rapidamente complicado.

Metaforicamente, você tem que gerenciar planetas redimensionadores separados orbitando em torno da forma do seu sol.

Gerenciar esses satélites quando a forma é restrita por dragBoundFunc é complicado.

Gerenciar esses satélites quando a forma é girada fica incrivelmente complicado devido ao uso de deslocamentos do KineticJS para definir o ponto de rotação.

Uma alternativa:use a caixa delimitadora da própria forma para gerenciar o redimensionamento.

• Ouça os eventos do mouse no palco.
• Quando o usuário passa o mouse sobre uma borda da forma, inicia uma operação de redimensionamento.
• À medida que o usuário arrasta, redimensione a forma com base na distância que o mouse foi arrastado do lado oposto ao lado arrastado.

Benefícios:

• Não são necessárias âncoras
• Usa o mesmo método de redimensionamento com o qual o usuário está familiarizado ao redimensionar janelas de sistema operacional
• Apenas a forma em si está envolvida, portanto não é necessário um gerenciamento complexo de "âncora de satélite".

Aqui está um exemplo: http://jsfiddle.net/m1erickson/T4E9Y/

Defina uma forma (este exemplo usa uma imagem).

kImage = new Kinetic.Image({
    image:img,
    x:10,
    y:10,
    width:img.width,
    height:img.height,
});
layer.add(kImage);
layer.draw();

Salve a área delimitadora da forma em seu tamanho atual

Ouça os eventos de mousedown no palco.

Salve a posição inicial de arrastar quando o usuário passar o mouse dentro de uma borda de caixa delimitadora de forma

$(stage.getContent()).on('mousedown', function (event) {
    var pos=stage.getPointerPosition();
    var mouseX=parseInt(pos.x);
    var mouseY=parseInt(pos.y);
    var ipos=kImage.position();
    var isize=kImage.getSize();
    var right=ipos.x+isize.width;
    if(mouseX>right-10 && mouseX<right+10){
        startRight=mouseX;
        startWidth=isize.width;
        startHeight=isize.height;
    }
});

Ouça eventos mousemove no palco.

Dimensione a forma com base na distância arrastada a partir da posição inicial de arrastar.

$(stage.getContent()).on('mousemove', function (event) {
    if(startRight>=0){
        var pos=stage.getPointerPosition();
        var mouseX=parseInt(pos.x);
        var mouseY=parseInt(pos.y);
        var dx=mouseX-startRight;
        var scaleFactor=(mouseX-(startRight-startWidth))/startWidth;
        kImage.width(startWidth*scaleFactor);
        kImage.height(startHeight*scaleFactor);
        layer.draw();
    }
});

Ouça os eventos mouseup no palco.

Finalize o redimensionamento de arrastar quando o usuário soltar o mouse

$(stage.getContent()).on('mouseup', function (event) {
    startRight=-1;
});

Para onde ir a partir daqui:

Este exemplo ativa um redimensionador da borda direita.Da mesma forma, você pode ativar as outras bordas.

Você pode alterar qual forma está sendo redimensionada alterando o alvo ao pressionar o mouse.

Para formas muito irregulares, você pode exibir a caixa delimitadora da forma quando o usuário passar para essa caixa delimitadora.Em seguida, deixe o usuário redimensionar usando as bordas da caixa delimitadora.

Você pode exibir a caixa delimitadora para todos os tipos de formas como destaque quando o mouse estiver na borda de arrastar.A caixa delimitadora torna-se um visual útil para o usuário.