HTML5画布裁剪功能kineticjs

最新推荐文章于 2024-05-11 23:41:21 发布

qinhuiying与html5

最新推荐文章于 2024-05-11 23:41:21 发布

阅读量778

点赞数

分类专栏： HTML5画布裁剪功能kineticjs 文章标签： HTML5画布裁剪功能kineticjs

HTML5画布裁剪功能kineticjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

画里面的东西kineticjs裁剪区域，我们可以设置任何容器夹属性，包括一组，一层一层，或阶段。剪辑区域是由X，Y，宽度和高度的定义。在本教程中，我们将绘制的斑点在矩形裁剪区域应用一组。

<!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">

      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 300
      });
      var layer = new Kinetic.Layer();
      var group = new Kinetic.Group({
        clip: [100, 40, 200, 100],
        draggable: true
      });
        
      var blueBlob = new Kinetic.Blob({
        points: [73, 140, 340, 23, 500, 109, 300, 170],
        stroke: 'blue',
        strokeWidth: 10,
        fill: '#aaf',
        tension: 0.8
      });

      var redBlob = new Kinetic.Blob({
        points: [73, 140, 340, 23, 500, 109],
        stroke: 'red',
        strokeWidth: 10,
        fill: '#faa',
        tension: 1.2,
        scale: 0.5,
        x: 100,
        y: 50
      });

      group.add(blueBlob);
      group.add(redBlob);
      layer.add(group);
      stage.add(layer);

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