Tutorial Canvas Animation: mouse events

Je browser ondersteunt geen Canvas. Update je browser naar de laatste versie.

Example1. Mouseup, mouseover, mousemove and Drag & Drop

HTML

 <!doctype html>
  <html>
  <head>
      <base href="http://www.html5code.nl"/>
      <title>Mouse events</title>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <script src="easeljs-0.7.1.min.js"></script>
  </head>
  <body> 
  	<canvas id="createjs2" style="border: 1px solid;"  ></canvas>
  </body>
  </html>

Javascript

          jQuery(document).ready(function() {
          initMouseEvents();
          });
  var stage;
  var canvasWidth;
  var canvasHeight;
  
  function initMouseEvents() {
      var canvas=jQuery("#createjs2");
      var context = canvas.get(0).getContext("2d");
      
      //Make the Canvas element  responsive for desktop, tablet en smartphone
      var parentWidth=jQuery(canvas).parent().width();
      canvasWidth = context.canvas.width  = parentWidth;
      canvasHeight = context.canvas.height  = 288;
      stage = new createjs.Stage(document.getElementById('createjs1'));
      createjs.Ticker.addEventListener("tick", handleTick);
      createjs.Ticker.setFPS(60);
      start();
  }

  function handleTick(e) {
  		stage.update();
  }
  function start() {
      ///CIRCLE 1 CLICK ME BUTTON
      var circle1 = new createjs.Shape();
      circle1.graphics.beginFill('#0000FF').drawCircle(0, 0, 50);
      circle1.x = stage.canvas.width / 2;
      circle1.y = stage.canvas.height / 2;
      circle1.name = 'Blue Circle';
      stage.addChild(circle1);
      //ADD TEXT
      txt1 = new createjs.Text("Click me");
      txt1.color = "#FFF";
      txt1.textAlign = 'center';
      txt1.textBaseline = 'middle';
      txt1.x = stage.canvas.width / 2;
      txt1.y = stage.canvas.height / 2;
      stage.addChild(txt1);
      circle1.txt = txt1;
     
      circle1.addEventListener('click', function (e) {
      stage.removeChild(e.target);
      }); 
      
      ///CIRCLE 2 DOUBLECLICK ME BUTTON
      var circle2 = new createjs.Shape();
      circle2.graphics.beginFill('#f16529').drawCircle(0, 0, 50);
      circle2.x = stage.canvas.width / 6;
      circle2.y = stage.canvas.height / 2;
      circle2.name = 'Red Circle';
      stage.addChild(circle2);
      //ADD TEXT
      txt2 = new createjs.Text("DoubleClick me");
      txt2.color = "#FFF";
      txt2.textAlign = 'center';
      txt2.textBaseline = 'middle';
      txt2.x = stage.canvas.width / 6;
      txt2.y = stage.canvas.height / 2;
      stage.addChild(txt2);
      circle2.txt = txt2;
        
      circle2.addEventListener('dblclick', function (e) {
      alert(e.target + ' was double clicked!');
      });
      
      ///CIRCLE 3 MOUSE OVER BUTTON
      /*MOUSE OVER AND MOUSE OUT
      *You can also register for rollover and rollout events on display objects. As you can probably imagine, the legwork
      *needed to constantly monitor the mouse location and compare it to the position of any display object can be taxing.
      *Therefore, it should probably be used as sparingly as possible in the Canvas environment. Because of this, EaselJS
      *doesn’t allow this functionality by default. You can turn it on by calling the following method:
      */
      stage.enableMouseOver();
      
      var circle3 = new createjs.Shape();
      circle3.graphics.beginFill('#00FF00').drawCircle(0, 0, 50);
      circle3.x = stage.canvas.width / 3;
      circle3.y = stage.canvas.height / 2;
      circle3.name = 'Green Circle';
      stage.addChild(circle3);
      //ADD TEXT
      txt3 = new createjs.Text("MouseOver me");
      txt3.color = "#FFF";
      txt3.textAlign = 'center';
      txt3.textBaseline = 'middle';
      txt3.x = stage.canvas.width / 3;
      txt3.y = stage.canvas.height / 2;
      stage.addChild(txt3);
      circle3.txt = txt3;
       
      circle3.cursor = 'pointer';
      circle3.addEventListener("mouseover", function (e) {
      circle3.alpha = 0.3;
      });
      circle3.addEventListener("mouseout", function (e) {
      circle3.alpha = 1;
      });
       
       //CIRCLE 4 DRAG & DROP BUTTON 
      /*DRAG & DROP
      *EaselJS does not come with built-in functionality for dragging and dropping display objects but you can easily
      *set this up with a combination of a few mouse events. Take a look at the code beneath, which accomplishes
      *drag-and-drop functionality.
      */
      
      var circle4 = new createjs.Shape();
      circle4.graphics.beginFill('#00FFFF').drawCircle(0, 0, 50);
      circle4.x = stage.canvas.width * 2 / 3;
      circle4.y = stage.canvas.height / 2;
      circle4.name = 'Green Circle';
      stage.addChild(circle4);
      //ADD TEXT
      txt4 = new createjs.Text("Drag & Drop me");
      txt4.color = "#FFF";
      txt4.textAlign = 'center';
      txt4.textBaseline = 'middle';
      txt4.x = stage.canvas.width *2/ 3;
      txt4.y = stage.canvas.height / 2;
      //circle4.addChild(txt4);
      stage.addChild(txt4);
      circle4.txt = txt4;
      
      circle4.addEventListener('mousedown',function(e){
      
      stage.addEventListener('stagemousemove',function(e){
      circle4.x = stage.mouseX;
      circle4.y = stage.mouseY;
      txt4.x = stage.mouseX;
      txt4.y = stage.mouseY;
      });
      
      stage.addEventListener('stagemouseup',function(e){
      e.target.removeAllEventListeners();
      });
      });
       
       
       ///CIRCLE 5 DRAG ME BUTTON 
      var circle5 = new createjs.Shape();
      circle5.graphics.beginFill('#FF00FF').drawCircle(0, 0, 50);
      circle5.x = stage.canvas.width * 5/ 6;
      circle5.y = stage.canvas.height / 2;
      circle5.name = 'Green Circle';
      stage.addChild(circle5);
      //ADD TEXT
      txt5 = new createjs.Text("Drag me");
      txt5.color = "#FFF";
      txt5.textAlign = 'center';
      txt5.textBaseline = 'middle';
      txt5.x = stage.canvas.width * 5/ 6;
      txt5.y = stage.canvas.height / 2;
      stage.addChild(txt5);
      circle5.txt = txt5;
      
      circle5.addEventListener('mousedown',function(e){
      
      stage.addEventListener('stagemousemove',function(e){
      circle5.x = stage.mouseX;
      circle5.y = stage.mouseY;
      txt5.x = stage.mouseX;
      txt5.y = stage.mouseY;
      
      });
      
      stage.addEventListener('stagemouseup',function(e){
      circle5.x = stage.canvas.width * 5 / 6;
      circle5.y = stage.canvas.height / 2;
      txt5.x = stage.canvas.width * 5 / 6;
      txt5.y = stage.canvas.height / 2;
      e.target.removeAllEventListeners();
      });
      });
    
  }
  

Next tutorial

Leave a comment