动力学js拖放，resize和旋转图像

我试图结合拖放resize的图像和旋转图像触摸 ，我的行为是奇怪的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 = '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和KineticJs ，请帮助我这个。

更新 ：

上面的小提琴不再工作，因为fillColor在新的浏览器上坏了 ，我已经更新了小提琴 ，虽然我一直无法找出解决scheme。

谢谢

Answer 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();