Question

我正在尝试绘制具有指定长度的点，但是看不到任何输出。

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);

})

Answer 1

点没有长度。它们只是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>

Answer 2

您可以使用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

paperjs绘制指定长度的点

2 个答案: