HTML5画布kineticjs习惯打功能教程

最新推荐文章于 2021-06-17 01:10:18 发布

luoxujuns

最新推荐文章于 2021-06-17 01:10:18 发布

阅读量773

点赞数

分类专栏： kineticjs的学习问题文章标签： kineticjs的一些代码比较喜欢这个kineticjs代码

kineticjs的学习问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

创建一个自定义的功能打画形状kineticjs，我们可以设置drawhitfunc财产。成功绘制功能，kineticjs将绘制一个用于碰撞检测区域的功能。使用自定义绘制命中函数可以有几个好处，如使严重的地区大，它的用户交互容易与形状，使部分形状检测和其他人没有，或简化命中绘制函数，为了提高渲染性能。

说明：鼠标悬停，mouseout，并在MouseDown，在明星和观察到严重的地区是一个超大型的圆圈包围的形状。

<!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-v4.6.0.min.js"></script>
    <script defer="defer">
      function writeMessage(messageLayer, message) {
        var context = messageLayer.getContext();
        messageLayer.clear();
        context.font = '18pt Calibri';
        context.fillStyle = 'black';
        context.fillText(message, 10, 25);
      }
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var shapesLayer = new Kinetic.Layer();
      var messageLayer = new Kinetic.Layer();

      var star = new Kinetic.Star({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2,
        numPoints: 7,
        innerRadius: 50,
        outerRadius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
        drawHitFunc: function(canvas) {
          var context = canvas.getContext();
          context.beginPath();
          context.arc(0, 0, this.getOuterRadius() + 10, 0, Math.PI * 2, true);
          context.closePath();
          canvas.fillStroke(this);
        }
      });

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

      shapesLayer.add(star);

      stage.add(shapesLayer);
      stage.add(messageLayer);

    </script>
  </body>
</html>

luoxujuns

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5画布kineticjs习惯打功能教程

创建一个自定义的功能打画形状kineticjs，我们可以设置drawhitfunc财产。成功绘制功能，kineticjs将绘制一个用于碰撞检测区域的功能。使用自定义绘制命中函数可以有几个好处，如使严重的地区大，它的用户交互容易与形状，使部分形状检测和其他人没有，或简化命中绘制函数，为了提高渲染性能。说明：鼠标悬停，mouseout，并在MouseDown，在明星和观察到严重的地区是一个
复制链接

扫一扫