41
sto cercando di coniugare drag and drop resize image e rotating image on touch, e la mia si sta comportando strano http://jsfiddle.net/littlechad/Kuaxn/Kinetic js, goccia, ridimensionare e ruotare un'immagine
Il mio codice è il seguente:
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();
Sembra che l'aggiornamento del offset è il problema, ho provato diverse cose per impostare l'offset in modo che rimanga nel mezzo, eppure non riesco ancora a capire come, sono davvero nuovo a HTML5 e KineticJs, per favore aiutatemi su questo.
UPDATE:
che questo violino non funziona più a causa del fillColor broken on new browsers, ho updated the fiddle, anche se non sono stati in grado di capire la soluzione per questo.
Grazie
Grazie per il 'violino. Qual è il comportamento previsto? Quando deve essere trascinata, ridimensionata o ruotata l'immagine? – likeitlikeit
@likeitlike il comportamento atteso è che posso ruotare, ridimensionare e trascinare l'immagine, il grilletto sarebbe al tatto e trascinare, è questo che intendi? – littlechad
Come si desidera ruotare? – lavrton