Jump to content

How to move images in kinetic?


Recommended Posts

Hi, I'm trying to move an image but I can't


  <script src="kinetic-v4.7.4.min.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      var layer = new Kinetic.Layer();

      var imageObj = new Image();
      imageObj.onload = function() {
        var cup = new Kinetic.Image({
          x: 200,
          y: 50,
          image: imageObj,
          width: 106,
          height: 118

        // add the shape to the layer

        // add the layer to the stage
      imageObj.src = 'copo.png';
      document.getElementById('show').addEventListener('click', function() {

        }, false);



Link to comment
Share on other sites

I can make it work,



<html>  <head>    <meta charset="utf-8">    <title>Prototype</title>    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script><style>body{padding:20px;}#container{  border:solid 1px #ccc;  margin-top: 10px;  width:350px;  height:350px;}</style>        <script>$(function(){    var stage = new Kinetic.Stage({        container: 'container',        width: 350,        height: 350    });    var layer = new Kinetic.Layer();    stage.add(layer);    var yoda;    var imageObj = new Image();    imageObj.onload = function() {        yoda = new Kinetic.Image({          x: 200,          y: 50,          image: imageObj,          width: 106,          height: 118        });        layer.add(yoda);        layer.draw();    }    imageObj.src="copo.png";    document.getElementById('show').addEventListener('click', function() {        yoda.move(0,5);                       layer.draw();    }, false);}); // end $(function(){});</script>       </head><body>    <button id="show">Move!</button>    <div id="container"></div></body></html>


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...