Databases
StackOverflow2013
Postsdbo
POKinetic js drag, drop, resize and rotate image
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POKinetic js drag, drop, resize and rotate image
    primarykey
    data
    text
    <p>I am trying to combine <a href="http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/" rel="noreferrer">drag and drop resize image</a> and <a href="http://jsfiddle.net/zk9cn/" rel="noreferrer">rotating image on touch</a>, and mine is behaving strange <a href="http://jsfiddle.net/littlechad/Kuaxn/" rel="noreferrer">http://jsfiddle.net/littlechad/Kuaxn/</a> </p> <p>My code is as follows:</p> <pre><code>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 &amp;&amp; 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(); </code></pre> <p>It seems that updating the offset is the problem, I have tried several things to set the offset so that it stays in the middle, yet I still can't figure out how, I am really new to <code>HTML5</code> and <code>KineticJs</code>, please help me on this.</p> <p><strong>UPDATE</strong>:</p> <p>The above fiddle is no longer working due to the <a href="https://github.com/ericdrowell/KineticJS/issues/244" rel="noreferrer">fillColor broken on new browsers</a>, I have <a href="http://jsfiddle.net/littlechad/Kuaxn/44/" rel="noreferrer">updated the fiddle</a>, although I haven't been able to figure out the solution for this.</p> <p>Thanks</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USlittlechad
    1. USlittlechad
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POKinetic js drag, drop, resize and rotate image
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POKinetic js drag, drop, resize and rotate image
      1. USlittlechad
      1. VTBountyStart
    3. VO
      singulars
      1. POKinetic js drag, drop, resize and rotate image
      1. USFranco Rondini
      1. VTFavorite
    1. COThanks for the 'fiddle. What is the expected behavior? When should the picture be dragged, scaled or rotated?
      singulars
      1. POKinetic js drag, drop, resize and rotate image
      1. USlikeitlikeit
    2. CO@likeitlikeit the expected behavior is that i can rotate, scale and drag-drog the image, the trigger would be on touch and drag, is that what you mean?
      singulars
      1. POKinetic js drag, drop, resize and rotate image
      1. USlittlechad
    3. COHow you want to rotate?
      singulars
      1. POKinetic js drag, drop, resize and rotate image
      1. USlavrton
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload