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,body{ padding:0; margin:0;}
    <script src="easeljs.js"></script>
  var stage, mouseBp;
  function init()
   stage = new createjs.Stage("canvas"); = "none";
   stage.addEventListener("stagemousemove", moveHandler);
   mouseBp = new createjs.Bitmap("hand_pointer.png");
   mouseBp.x = -9999;
   mouseBp.y = -9999;
   createjs.Ticker.addEventListener("tick", tick);
  function moveHandler()
   mouseBp.x = stage.mouseX;
   mouseBp.y = stage.mouseY;
  function tick(event)
<body onLoad="init();">
    <canvas id="canvas" width="600" height="480"></canvas>


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP