paperjs 绘制一个指定长度的点答案

【问题标题】：paperjs draw a point with a specified lengthpaperjs 绘制一个指定长度的点
【发布时间】：2018-06-22 20:58:44
【问题描述】：

我正在尝试绘制一个指定长度的点，但没有看到任何输出。

HTML

<div class="container">
    <div class="col-md-8">
        <canvas id="myCanvas" class="canvas-mouse-tracker"></canvas>
    </div>
</div>

jQuery:-

$(document).ready(function(){

    paper.install(window)
    paper.setup('myCanvas')

   var myPath = new Path();
   myPath.strokeColor = 'black';
   p = new Point(100,100)
   p.length=400
   /* p1 = new Point(500,500) */
   myPath.add(p);
   //myPath.add(p1);

})

【问题讨论】：

标签： paperjs

【解决方案1】：

您可以使用 Path.Circle 类显示一个点

查看示例http://jsfiddle.net/hxk2wmrf/

   radius = 5;
   p = new Path.Circle(new Point(100,100), radius)
   p.fillColor='red';

Path.Circle 参考http://paperjs.org/reference/path/#path-circle-center-radius

【讨论】：

【解决方案2】：

点没有长度。它们只是points，它描述了平面/视图上的位置。您的问题似乎源于对几何点的轻微误解，而不是来自 PaperJS。

几何点没有任何长度、面积、体积或任何其他维度属性。

另一方面，Path 确实有 length，但这取决于它的 segments，它连接您指定的点。

这是一个示例，我创建了一个连接 3 个点的 Path。

paper.setup(document.querySelector('canvas'))

let path = new paper.Path({
  strokeColor: 'black',
  segments: [
    new paper.Point(50, 50),
    new paper.Point(100, 50),
    new paper.Point(100, 100)
  ]
})

console.log(path.length)

canvas[resize] {
  width: 100%;
  height: 100%;
}

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

<canvas resize></canvas>

【讨论】：