Friday, 10 January 2014

Custom cursor in EaselJS

In this post I will change the default cursor used in the HTML page to a custom image cursor in EaselJS. Firstly, you need to hide the default cursor using CSS or Javascript. Then use the mouse move event to move the x and y positions of the image with the stageX and stageY properties. I have used a png image of a cursor. Alternative, you can recreate the cursor using the shape class in Easel.

<!DOCTYPE html>
<html>
<head>
 <style>
 html,body{ padding:0; margin:0;}
 #canvas{background-color:#000000;}   
 </style>
    <script src="easeljs.js"></script>
    <script>
 
  var stage, mouseBp;
  
  function init()
  {
   stage = new createjs.Stage("canvas");
   stage.canvas.style.cursor = "none";
   stage.addEventListener("stagemousemove", moveHandler);
  
   mouseBp = new createjs.Bitmap("hand_pointer.png");
   mouseBp.x = -9999;
   mouseBp.y = -9999;
   stage.addChild(mouseBp);
   
   createjs.Ticker.addEventListener("tick", tick);
  }
  
  
  function moveHandler()
  {
   mouseBp.x = stage.mouseX;
   mouseBp.y = stage.mouseY;
  }
  
  function tick(event)
  {
   stage.update();
  } 
    </script>
 
</head>
<body onLoad="init();">
    <canvas id="canvas" width="600" height="480"></canvas>
</body>
</html>

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP