0

如何使用动力学 js 绘制线条层？我有这样的代码......

<!DOCTYPE HTML> 
<html>
   <head>
    <script src="kinetic-v4.7.0.min.js"></script>
    <script>
        window.onload = function() {
            layer = new Kinetic.Layer();
            stage = new Kinetic.Stage({
                container: "container",
                width: 320,
                height: 320
            });

            background = new Kinetic.Rect({
                x: 0, 
                y: 0, 
                width: stage.getWidth(),
                height: stage.getHeight(),
                fill: "white"
            });

            line = new Kinetic.Line({
                points: [0, 0, 50, 50],
                stroke: "red"
            });

            layer.add(background);
            layer.add(line);
            stage.add(layer);

            moving = false;

            stage.on("mousedown", function(){
                if (moving){
                    moving = false;layer.draw();
                } else {
                    var mousePos = stage.getMousePosition();
                    //start point and end point are the same
                    line.getPoints()[0].x = mousePos.x;
                    line.getPoints()[0].y = mousePos.y;
                    line.getPoints()[1].x = mousePos.x;
                    line.getPoints()[1].y = mousePos.y;

                    moving = true;    
                    layer.drawScene();            
                }

            });

            stage.on("mousemove", function(){
                if (moving) {
                    var mousePos = stage.getMousePosition();
                    var x = mousePos.x;
                    var y = mousePos.y;
                    line.getPoints()[1].x = mousePos.x;
                    line.getPoints()[1].y = mousePos.y;
                    moving = true;
                    layer.drawScene();
                }
            });

            stage.on("mouseup", function(){
                moving = false; 
            });

        };
    </script>
</head>
<body>
    <div id="container" ></div>
</body>
</html>

但这使整个舞台成为层。我想要它以我可以绘制多条线的方式，以便创建多个图层......

这是用于将我的自定义图标作为舞台内层的代码...

<!DOCTYPE HTML>
<html>
  <head>
    <title>DRAW PAD</title>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #container{
        border: 2px solid #333333;
        width: 700px !important;
        height: 400 !important;
        margin:0 auto;
      }
      #controls{
        border: 2px solid #efefef;
        width: 700px !important;
        margin:0 auto;
      }
      img{
        cursor:pointer;
        height:80px;
        width:80px;
      }
    </style>
  </head>
  <body>
    <h2>DRAW PAD</h2>
    <div id="container"></div>
    <div id="controls">
        <img src="beams.png" onClick="drawImage(this.src)" />
        <img src="cracks.png" onClick="drawImage(this.src)" />
        <img src="down-spouts.png" onClick="drawImage(this.src)" />
        <img src="exterior.png" onClick="drawImage(this.src)" />
        <img src="fence.png" onClick="drawImage(this.src)" />
        <img src="grate.png" onClick="drawImage(this.src)" />
        <img src="interior.png" onClick="drawImage(this.src)" />
        <img src="pier.png" onClick="drawImage(this.src)" />
        <img src="pump.png" onClick="drawImage(this.src)" />
        <img src="wall-push.png" onClick="drawImage(this.src)" />
        <img src="window-wells.png" onClick="drawImage(this.src)" />
        <img src="yard-line.png" onClick="drawImage(this.src)" />
    </div>
    <script src="kinetic.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 700,
        height: 400,
        draggable: true
      });

      function drawImage(imgsrc) { 
        var layer = new Kinetic.Layer();
        var imageObj = new Image();
        imageObj.src = imgsrc;
        // darth vader
        var darthVaderImg = new Kinetic.Image({
          image: imageObj,
          x: stage.getWidth() / 2 - 200 / 2,
          y: stage.getHeight() / 2 - 137 / 2,
          width: 80,
          height: 80,
          draggable: true
        });

        layer.add(darthVaderImg);
        stage.add(layer);
      }
    </script>
  </body>
</html>
4

0 回答 0