代码之家 › 专栏 › 技术社区 › user1050619

纸张.js将变量传递给javascript

paperjs javascript

0

user1050619 · 技术社区 · 7 年前

我有一个简单的应用程序,将绘制一条直线,矩形和多边形。

我正在使用纸张.js但不知道如何控制流量。

仅当单击线条(按钮)时才应绘制线条。目前,默认情况下,该线绘制在画布上。

<!-- templates/index.html -->
<html>
  <head>
    <title>Annotation Tool</title>

    <!-- CSS Files -->
    <link rel="stylesheet" href="/static/node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/style.css">

    <!-- Javascript files -->
    <script src="/static/node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
    <script src="/static/node_modules/bootstrap/dist/js/bootstrap.min.js" charset="utf-8"></script>
    <script src="/static/js/scripts.js" charset="utf-8"></script>

    <!-- Paper files -->
    <script src="/static/node_modules/paper/dist/paper-full.min.js" charset="utf-8"></script>
    <script type="text/paperscript" src="/static/js/paperscript.js" charset="utf-8" canvas="myCanvas"></script>


  </head>
  <body>
  <script>

  </script>
  <div class="container">

      <div class="row row-bordered">
          <div class="btn-toolbar">
              <button type="button" class="btn btn-primary" id="draw-line">Line</button>
              <button type="button" class="btn btn-primary" id="draw-rect">Rectangle</button>
              <button type="button" class="btn btn-primary" id="draw-poly">Polygon</button>
          </div>
      </div>

      <canvas id="myCanvas"></canvas>
      <!--<div class="row">-->
         <!--<img src="/static/images/lena.png" alt="Italian Trulli">-->
      <!--</div>-->

  </div>


  </body>
</html>

tool.minDistance = 10;

var path;

function onMouseDown(event) {
    // Create a new path and give it a stroke color:
    path = new Path();
    path.strokeColor = '#00000';

    // Add a segment to the path where
    // you clicked:
    path.add(event.point);
}

function onMouseDrag(event) {
    // Every drag event, add a segment
    // to the path at the position of the mouse:
    path.add(event.point);
}
function internalClicked() {
  alert('clicked!');
}

globals.onMouseDown = onMouseDown
globals.onMouseDrag = onMouseDrag
globals.internalClicked = internalClicked

// 脚本.js

var globals = {}

$(document).ready(function(){
    $('#draw-line').click(function(){
        // how can I pass this function to paper script, so that before drawing the line I can check if the draw-line is clicked.
        // or how can I override the mouseclickevents of paperjs in javascript.
    })
})

1 回复 | 直到 7 年前

1

sasensi 7 年前

Paper.js 纸张.js 直接在JavaScript代码中而不是使用PaperScript。
paper 对象。
看看这个 documentation

这样做,您将能够更好地将绘图逻辑集成到代码中,并且不必依赖全局变量之类的坏东西。

下面的示例演示了如何实现“绘制线”按钮。

// wait for DOM to be loaded
$(document).ready(function ()
{
    // init paper in your canvas
    paper.setup($('#myCanvas').get(0));
    
    // on button click
    $('#draw-line').click(function ()
    {
        // draw a line between 2 random points
        new paper.Path.Line({
            from       : paper.Point.random().multiply(paper.view.size),
            to         : paper.Point.random().multiply(paper.view.size),
            strokeColor: 'black'
        });
    });
});

canvas {
  position: fixed;
  top:0;
  left:0;
  width: 100vw;
  height: 100vh;
  z-index:-1;
}

<html>
<head>
    <title>Line Tool</title>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-core.min.js"></script>

</head>
<body>

<button type="button" id="draw-line">Line</button>

<canvas id="myCanvas"></canvas>

</body>
</html>