文章/答案/技术大牛

发布

社区首页 >问答首页 >我想将paper.js示例从文本转换为javascript

问我想将paper.js示例从文本转换为javascript
EN

Stack Overflow用户

提问于 2022-10-01 12:53:14

回答 1查看 105关注 0票数 0

我是日本人，我为我的不自然英语道歉，但如果你能读懂，我会很感激的。我学习了如何从正式文档中将文本转换为javascript。其手段如下：

将脚本标记的type属性更改为text/paperscript。<script type="text/paperscript" src="./main.js"></script>
为全局使用启用Paperscope。paper.install(window)
指定画布的目标。paper.setup(document.getElementById("myCanvas"))
在onload window.onload = function(){ /* add main code */ }中编写主代码
最后，添加paper.view.draw()
onFrame和onResize转换如下。view.onFrame = function(event) {}
onMouseDown、onMouseUp、onMouseDrag、onMouseMove等按以下方式转换。var customTool = new Tool(); customTool.onMouseDown = function(event) {};

我尝试过这些方法，但将这些方法应用于paper.js官方站点上的示例并不正确。下面的代码是尝试这些代码的结果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="https://unpkg.com/paper"></script>
  <script type="text/javascript" src="./main.js"></script>
  <title>Document</title>
</head>
<body>
  <canvas id="myCanvas"></canvas>
</body>
</html>

paper.install(window);
console.log("run test")
var myCanvas = document.getElementById("myCanvas")
var customTool = new Tool();
window.onload = function(){
  paper.setup(myCanvas)

  var points = 25;

  // The distance between the points:
  var length = 35;

  var path = new Path({
    strokeColor: '#E4141B',
    strokeWidth: 20,
    strokeCap: 'round'
  });

  var start = view.center / [10, 1];
  for (var i = 0; i < points; i++)
    path.add(start + new Point(i * length, 0));

  customTool.onMouseMove=function(event) {
    path.firstSegment.point = event.point;
    for (var i = 0; i < points - 1; i++) {
      var segment = path.segments[i];
      var nextSegment = segment.next;
      var vector = segment.point - nextSegment.point;
      vector.length = length;
      nextSegment.point = segment.point - vector;
    }
    path.smooth({ type: 'continuous' });
  }

  customTool.onMouseDown=function(event) {
    path.fullySelected = true;
    path.strokeColor = '#e08285';
  }

  customTool.onMouseUp=function(event) {
    path.fullySelected = false;
    path.strokeColor = '#e4141b';
  }
  view.draw();
}

原始文本可以找到这里。

这个代码有什么问题？谢谢你一直读到最后！

javascript

html

web

paperjs

回答 1

Stack Overflow用户

发布于 2022-11-28 18:16:49

for循环中的var vector没有在代码中获得正确的值。改变数学运算符，它将像纸it演示一样工作。

矢量的数学运算符(+ - * /)只在文本中工作。在Javascript中，使用.add() .subtract() .multiply() .divide()。请参阅http://paperjs.org/reference/point/#subtract-point

// paperscript
segment.point - nextSegment.point

// javascript
segment.point.subtract(nextSegment.point)

下面是您的示例的工作演示

paper.install(window);
console.log("run test")
var myCanvas = document.getElementById("myCanvas")
var customTool = new Tool();
window.onload = function() {
  paper.setup(myCanvas)

  var points = 15; //25

  // The distance between the points:
  var length = 20; //35

  var path = new Path({
    strokeColor: '#E4141B',
    strokeWidth: 20,
    strokeCap: 'round'
  });

  var start = view.center / [10, 1];
  for (var i = 0; i < points; i++) {
    path.add(start + new Point(i * length, 0));
  }

  customTool.onMouseMove = function(event) {
    path.firstSegment.point = event.point;
    for (var i = 0; i < points - 1; i++) {
      var segment = path.segments[i];
      var nextSegment = segment.next;

      //var vector = segment.point - nextSegment.point;
      var vector = segment.point.subtract(nextSegment.point);

      vector.length = length;

      //nextSegment.point = segment.point - vector;
      nextSegment.point = segment.point.subtract(vector);
    }
    path.smooth({
      type: 'continuous'
    });
  }

  customTool.onMouseDown = function(event) {
    path.fullySelected = true;
    path.strokeColor = '#e08285';
  }

  customTool.onMouseUp = function(event) {
    path.fullySelected = false;
    path.strokeColor = '#e4141b';
  }
  view.draw();
}

html,
body {
  margin: 0
}

canvas {
  border: 1px solid red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="https://unpkg.com/paper"></script>
  <!-- you can add this back in -->
  <!-- <script type="text/javascript" src="./main.js"></script> -->
  <title>Document</title>
</head>

<body>
  <!-- set any size you want, or use CSS/JS to make this resizable -->
  <canvas id="myCanvas" width="600" height="150"></canvas>
</body>

</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73918440

复制

相似问题

问我想将paper.js示例从文本转换为javascript
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我想将paper.js示例从文本转换为javascriptEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我想将paper.js示例从文本转换为javascript
EN