使用KineticJS HTML5画布修改曲线锚点

最新推荐文章于 2020-12-02 09:49:03 发布

zhaojiazhiyy

最新推荐文章于 2020-12-02 09:49:03 发布

阅读量693

点赞数

分类专栏：使用KineticJS HTML5画布修改曲线锚点文章标签：使用KineticJS HTML5画布修

本文链接：https://blog.csdn.net/zhaojiazhiyy/article/details/17453851

版权

使用KineticJS HTML5画布修改曲线锚点专栏收录该内容

1 篇文章 0 订阅

订阅专栏

产品说明:使用鼠标或手指和拖放锚点来修改二次曲线的曲率和曲线。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
    <script defer="defer">
      // globals
      var curveLayer, lineLayer, anchorLayer, quad, bezier
      
      function updateDottedLines() {
        var q = quad;
        var b = bezier;

        var quadLine = lineLayer.get('#quadLine')[0];
        var bezierLine = lineLayer.get('#bezierLine')[0];

        quadLine.setPoints([q.start.attrs.x, q.start.attrs.y, q.control.attrs.x, q.control.attrs.y, q.end.attrs.x, q.end.attrs.y]);

        bezierLine.setPoints([b.start.attrs.x, b.start.attrs.y, b.control1.attrs.x, b.control1.attrs.y, b.control2.attrs.x, b.control2.attrs.y, b.end.attrs.x, b.end.attrs.y]);
        lineLayer.draw();
      }
      function buildAnchor(x, y) {
        var anchor = new Kinetic.Circle({
          x: x,
          y: y,
          radius: 20,
          stroke: '#666',
          fill: '#ddd',
          strokeWidth: 2,
          draggable: true
        });

        // add hover styling
        anchor.on('mouseover', function() {
          document.body.style.cursor = 'pointer';
          this.setStrokeWidth(4);
          anchorLayer.draw();
        });
        anchor.on('mouseout', function() {
          document.body.style.cursor = 'default';
          this.setStrokeWidth(2);
          anchorLayer.draw();
          
        });

        anchor.on('dragend', function() {
          drawCurves();
          updateDottedLines();
        });

        anchorLayer.add(anchor);
        return anchor;
      }
      function drawCurves() {
        var context = curveLayer.getContext();

        context.clear();

        // draw quad
        context.beginPath();
        context.moveTo(quad.start.attrs.x, quad.start.attrs.y);
        context.quadraticCurveTo(quad.control.attrs.x, quad.control.attrs.y, quad.end.attrs.x, quad.end.attrs.y);
        context.setAttr('strokeStyle', 'red');
        context.setAttr('lineWidth', 4);
        context.stroke();

        // draw bezier
        context.beginPath();
        context.moveTo(bezier.start.attrs.x, bezier.start.attrs.y);
        context.bezierCurveTo(bezier.control1.attrs.x, bezier.control1.attrs.y, bezier.control2.attrs.x, bezier.control2.attrs.y, bezier.end.attrs.x, bezier.end.attrs.y);
        context.setAttr('strokeStyle', 'blue');
        context.setAttr('lineWidth', 4);
        context.stroke();
      }

      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 578,
          height: 200
        });

        anchorLayer = new Kinetic.Layer();
        lineLayer = new Kinetic.Layer;

        // curveLayer just contains a canvas which is drawn
        // onto with the existing canvas API
        curveLayer = new Kinetic.Layer();

        var quadLine = new Kinetic.Line({
          dashArray: [10, 10, 0, 10],
          strokeWidth: 3,
          stroke: 'black',
          lineCap: 'round',
          id: 'quadLine',
          opacity: 0.3,
          points: [0, 0]
        });

        var bezierLine = new Kinetic.Line({
          dashArray: [10, 10, 0, 10],
          strokeWidth: 3,
          stroke: 'black',
          lineCap: 'round',
          id: 'bezierLine',
          opacity: 0.3,
          points: [0, 0]
        });

        // add dotted line connectors
        lineLayer.add(quadLine);
        lineLayer.add(bezierLine);

        quad = {
          start: buildAnchor(60, 30),
          control: buildAnchor(240, 110),
          end: buildAnchor(80, 160)
        };

        bezier = {
          start: buildAnchor(280, 20),
          control1: buildAnchor(530, 40),
          control2: buildAnchor(480, 150),
          end: buildAnchor(300, 150)
        };

        // keep curves insync with the lines
        anchorLayer.on('beforeDraw', function() {
          drawCurves();
          updateDottedLines();
        });

    

        stage.add(curveLayer);
        stage.add(lineLayer);
        stage.add(anchorLayer);

        drawCurves();
        updateDottedLines();

      };

    </script>
  </head>
  <body οnmοusedοwn="return false;">
    <div id="container"></div>
  </body>
</html>

zhaojiazhiyy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用KineticJS HTML5画布修改曲线锚点

产品说明:使用鼠标或手指和拖放锚点来修改二次曲线的曲率和曲线。 body { margin: 0px; padding: 0px; } // globals var curveLayer, lineLayer, anchorLayer, quad, bezie
复制链接

扫一扫