Kinetic js拖放，调整大小和旋转图像

Posted 2023-05-07

【中文标题】Kinetic js拖放，调整大小和旋转图像

【英文标题】：Kinetic js drag, drop, resize and rotate image

【发布时间】：2013-04-17 23:02:48

【问题描述】：

我正在尝试结合 drag and drop resize image 和 rotating image on touch，而我的行为很奇怪 http://jsfiddle.net/littlechad/Kuaxn/

我的代码如下：

function update (activeAnchor) 
    var group       = activeAnchor.getParent();
    var topLeft     = group.get('.topLeft')[0];
    var topRight    = group.get('.topRight')[0];
    var bottomRight = group.get('.bottomRight')[0];
    var bottomLeft  = group.get('.bottomLeft')[0];
    var image       = group.get('.image')[0];
    var stage       = group.getStage();

    var anchorX     = activeAnchor.getX();
    var anchorY     = activeAnchor.getY();

    // update anchor positions
    switch (activeAnchor.getName()) 
        case 'topLeft':
            topRight.setY(anchorY);
            bottomLeft.setX(anchorX);
            break;
        case 'topRight':
            topLeft.setY(anchorY);
            bottomRight.setX(anchorX);
            break;
        case 'bottomRight':
            bottomLeft.setY(anchorY);
            topRight.setX(anchorX); 
            break;
        case 'bottomLeft':
            bottomRight.setY(anchorY);
            topLeft.setX(anchorX); 
            break;
    

    image.setPosition(topLeft.getPosition());

    var height          = bottomLeft.attrs.y - topLeft.attrs.y;
    var width           = image.getWidth()*height/image.getHeight();

    topRight.attrs.x    = topLeft.attrs.x + width
    topRight.attrs.y    = topLeft.attrs.y;
    bottomRight.attrs.x = topLeft.attrs.x + width;
    bottomRight.attrs.y = topLeft.attrs.y + height;

    if (width && height) 
        image.setSize(width, height);
    


function rotate (activeAnchor) 
    var group       = activeAnchor.getParent();
    var topLeft     = group.get('.topLeft')[0];
    var topRight    = group.get('.topRight')[0];
    var bottomRight = group.get('.bottomRight')[0];
    var bottomLeft  = group.get('.bottomLeft')[0];
    var image       = group.get('.image')[0];
    var stage       = group.getStage();

    var pos         = stage.getMousePosition();
    var xd          = 150 - pos.x ;
    var yd          = 150 - pos.y ;
    var theta       = Math.atan2(yd, xd);
    var degree      = theta / (Math.PI / 180) - 45;

    var height      = bottomLeft.attrs.y - topLeft.attrs.y;
    var width       = image.getWidth() * height / image.getHeight();

    console.log(degree);        
    console.log(width);
    console.log(height);

    image.setRotationDeg(degree);

    return 
        x: image.getAbsolutePosition().x,
        y: image.getAbsolutePosition().y
    


function addAnchor (group, x, y, name) 
    var stage  = group.getStage();
    var layer  = group.getLayer();
    var anchor = new Kinetic.Circle(
        x: x,
        y: y,
        stroke: 'transparent',
        strokeWidth: 0,
        radius: 20,
        name: name,
        draggable: false,
        dragOnTop: false
    );

    if(name === 'topRight')
        var anchor = new Kinetic.Circle(
            x: x,
            y: y,
            stroke: '#666',
            fill: '#ddd',
            strokeWidth: 2,
            radius: 20,
            name: name,
            draggable: true,
            dragOnTop: false
        ); 
    

    anchor.on('dragmove', function () 
        update(this);
        rotate(this);
        layer.draw();
    );

    anchor.on('mousedown touchstart', function () 
        group.setDraggable(false);
        this.moveToTop();
    );

    anchor.on('dragend', function () 
        group.setDraggable(true);
        layer.draw();
    );

    group.add(anchor);

    

function initStage () 

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

    var imageGroup = new Kinetic.Group(
        x: 150,
        y: 150,
        draggable: true,
    );

    var layer  = new Kinetic.Layer(
        width: 128,
        height: 128,
        offset: [64, 64]
    );

    layer.add(imageGroup);

    var imgObj        = new Image();

    var imageInstance = new Kinetic.Image(
        x: 0,
        y: 0,
        image: imgObj,
        width: 200,
        height: 138,
        name: 'image',
    );

    imgObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

    imageGroup.add(imageInstance);
    addAnchor(imageGroup, 0, 0, 'topLeft');
    addAnchor(imageGroup, 200, 0, 'topRight');
    addAnchor(imageGroup, 200, 138, 'bottomRight');
    addAnchor(imageGroup, 0, 138, 'bottomLeft');

    imageGroup.on('dragstart', function() 
        update(this);
        rotate(this);
        this.moveToTop();
    );

    stage.add(layer);
    stage.draw();


function writeMessage (messageLayer, message) 
    var context = messageLayer.getContext();
    messageLayer.clear();
    context.font = '18pt Calibri';
    context.fillStyle = 'black';
    context.fillText(message, 10, 25);


//loadImages(sources, initStage);
initStage();

似乎更新偏移量是问题，我尝试了几种方法来设置偏移量以使其保持在中间，但我仍然无法弄清楚如何，我对HTML5和@真的很陌生987654329@，请帮帮我。

更新：

由于fillColor broken on new browsers，上述小提琴不再起作用，我有updated the fiddle，尽管我还没有找到解决方案。

谢谢

【问题讨论】：

感谢您的提琴。预期的行为是什么？什么时候应该拖动、缩放或旋转图片？

@likeitlikeit 预期的行为是我可以旋转、缩放和拖动图像，触发器将是触摸和拖动，这是你的意思吗？

你想如何旋转？

你的小提琴好像坏了

我不明白你想要什么，你的小提琴也坏了。我发现你的小提琴和代码有 2 个问题。首先，您为 kineticjs 添加到小提琴中的 CDN 拒绝访问。所以我更换了cdn。其次，方法 getMousePosition() 在 kineticjs v5.x.x 上不再可用。所以我用等效的getPointerPosition() 替换了该方法。这是更新的小提琴jsfiddle.net/k7moorthi/Kuaxn/36。我不知道这是不是你想要的，但我希望这可以帮助你！

【参考方案1】：

你非常接近，只是使用了一些不正确的方法名称，而且如前所述，cdn 需要更改。

function update(activeAnchor) 
var group       = activeAnchor.getParent();
var topLeft     = group.get('.topLeft')[0];
var topRight    = group.get('.topRight')[0];
var bottomRight = group.get('.bottomRight')[0];
var bottomLeft  = group.get('.bottomLeft')[0];
var image       = group.get('.image')[0];
var stage       = group.getStage();

var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();

switch (activeAnchor.getName()) 
    case 'topLeft':
        topRight.setY(anchorY);
        bottomLeft.setX(anchorX);
        break;
    case 'topRight':
        topLeft.setY(anchorY);
        bottomRight.setX(anchorX);
        break;
    case 'bottomRight':
        bottomLeft.setY(anchorY);
        topRight.setX(anchorX); 
        break;
    case 'bottomLeft':
        bottomRight.setY(anchorY);
        topLeft.setX(anchorX); 
        break;

image.setPosition(topLeft.getPosition());

var height = bottomLeft.attrs.y - topLeft.attrs.y;
var width  = image.getWidth()*height/image.getHeight();

topRight.attrs.x = topLeft.attrs.x + width
topRight.attrs.y = topLeft.attrs.y;
bottomRight.attrs.x = topLeft.attrs.x + width;
bottomRight.attrs.y = topLeft.attrs.y + height;

if(width && height) 
    image.setSize(width, height);



function rotate(activeAnchor)
var group       = activeAnchor.getParent();
var topLeft     = group.get('.topLeft')[0];
var topRight    = group.get('.topRight')[0];
var bottomRight = group.get('.bottomRight')[0];
var bottomLeft  = group.get('.bottomLeft')[0];
var image       = group.get('.image')[0];
var stage       = group.getStage();

var pos     = stage.getPointerPosition();
var xd      = 150 - pos.x ;
var yd      = 150 - pos.y ;
var theta   = Math.atan2(yd, xd);
var degree  = theta / (Math.PI / 180) - 45;

var height  = bottomLeft.attrs.y - topLeft.attrs.y;
var width   = image.getWidth()*height/image.getHeight();

console.log(degree);

console.log(width);
console.log(height);
image.setRotationDeg(degree);
return 
    x: image.getAbsolutePosition().x,
    y: image.getAbsolutePosition().y



function addAnchor(group, x, y, name) 
var stage = group.getStage();
var layer = group.getLayer();
var anchor = new Kinetic.Circle(
    x: x,
    y: y,
    stroke: '#fff',
    fill: '#fff',
    strokeWidth: 2,
    radius: 20,
    name: name,
    draggable: false,
    dragOnTop: false
);

if(name === 'topRight')
    var anchor = new Kinetic.Circle(
      x: x,
      y: y,
      stroke: '#666',
      fill: '#ddd',
      strokeWidth: 2,
      radius: 20,
      name: name,
      draggable: true,
      dragOnTop: false
    );

anchor.on('dragmove', function() 
    update(this);
    rotate(this);
    layer.draw();
);
anchor.on('mousedown touchstart', function() 
    group.setDraggable(false);
    this.moveToTop();
);
anchor.on('dragend', function() 
    group.setDraggable(true);
    layer.draw();
);
group.add(anchor);



function initStage()           
var stage = new Kinetic.Stage(
    container: 'container',
    width: 500,
    height: 800
);

var imageGroup = new Kinetic.Group(
    x: 150,
    y: 150,
    draggable: true,
);

var layer  = new Kinetic.Layer(
    width: 128,
    height: 128,
    offset: [64, 64]
);
layer.add(imageGroup);

var imgObj        = new Image();
var imageInstance = new Kinetic.Image(
    x: 0,
    y: 0,
    image: imgObj,
    width: 200,
    height: 138,
    name: 'image',
);
imgObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-
vader.jpg';

imageGroup.add(imageInstance);
addAnchor(imageGroup, 0, 0, 'topLeft');
addAnchor(imageGroup, 200, 0, 'topRight');
addAnchor(imageGroup, 200, 138, 'bottomRight');
addAnchor(imageGroup, 0, 138, 'bottomLeft');

imageGroup.on('dragstart', function() 
    update(this);
    rotate(this);
    this.moveToTop();
);

stage.add(layer);
stage.draw();


function writeMessage(messageLayer, message) 
var context = messageLayer.getContext();
messageLayer.clear();
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 10, 25);


loadImages(sources, initStage);
initStage();

【讨论】：

我很抱歉，但我没有看到你的修复有太大变化，我认为唯一改变的是 getMousePosition 到 getPointerPosition ，我在小提琴中检查了这个，它仍然是提出了与我 4 年前遇到的相同的问题。