HTML5画布形状与KineticJS事件

最新推荐文章于 2018-01-24 06:49:00 发布

limeiyans

最新推荐文章于 2018-01-24 06:49:00 发布

阅读量1.1k

点赞数

分类专栏： HTML5画布形状与KineticJS事件文章标签： HTML5画布形状与KineticJS事

本文链接：https://blog.csdn.net/limeiyans/article/details/18403209

版权

HTML5画布形状与KineticJS事件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

检测形状与KineticJS事件,我们可以使用on()方法将事件处理程序绑定到一个节点。在()方法需要一个事件类型和事件发生时执行的函数。KineticJS支持鼠标悬停、mouseoutmouseenter、mouseleavemousemove,mousedown,mouseup,click,dblclick,dragstart,拖动结束桌面活动。

说明:Mouseover和mouseout三角形,鼠标悬停,mouseout,mousedown和mouseup循环。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.0.min.js"></script>
    <script defer="defer">
      function writeMessage(message) {
        text.setText(message);
        layer.draw();
      }
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();
      
      var triangle = new Kinetic.RegularPolygon({
        x: 190,
        y: 120,
        sides: 3,
        radius: 80,
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 4
      });
      
      var text = new Kinetic.Text({
        x: 10,
        y: 10,
        fontFamily: 'Calibri',
        fontSize: 24,
        text: '',
        fill: 'black'
      });
      
      triangle.on('mouseout', function() {
        writeMessage('Mouseout triangle');
      });

      triangle.on('mousemove', function() {
        var mousePos = stage.getPointerPosition();
        var x = mousePos.x - 190;
        var y = mousePos.y - 40;
        writeMessage('x: ' + x + ', y: ' + y);
      });

      var circle = new Kinetic.Circle({
        x: 380,
        y: stage.height()/2,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4
      });

      circle.on('mouseover', function() {
        writeMessage('Mouseover circle');
      });
      circle.on('mouseout', function() {
        writeMessage('Mouseout circle');
      });
      circle.on('mousedown', function() {
        writeMessage('Mousedown circle');
      });
      circle.on('mouseup', function() {
        writeMessage('Mouseup circle');
      });

      layer.add(triangle);
      layer.add(circle);
      layer.add(text);
      stage.add(layer);
      
    </script>
  </body>
</html>

limeiyans

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5画布形状与KineticJS事件

检测形状与KineticJS事件,我们可以使用on()方法将事件处理程序绑定到一个节点。在()方法需要一个事件类型和事件发生时执行的函数。KineticJS支持鼠标悬停、mouseoutmouseenter、mouseleavemousemove,mousedown,mouseup,click,dblclick,dragstart,拖动结束桌面活动。说明:Mouseover和mouseou
复制链接

扫一扫