Paperjs：在下部div的中心绘制一个圆圈不遵守正确的中心/Y坐标

Question

jsfiddle： https://jsfiddle.net/09a7kb32/

我有一个页面带有标头div（高度：50px）和一个帆布div（其高度占据屏幕的其余部分）。我正在使用Paperjs绘制一个圆圈，即（下）帆布div的全尺寸。但是，即使应该正确计算中心的X/y坐标似乎也没有遵守。我的圆圈比应有的圆圈要低，并且标头和画布之间有空的垂直缝隙，而它应该直接触摸标头。

canvasElem = $('#canvas').get(0);
paper.setup(canvasElem);

var offset = $('#canvasPanel').offset(); 
var width = $('#canvasPanel').width(); 
var height = $('#canvasPanel').height();

var centerX = offset.left + width / 2;   // CenterX is left offset of Header DIV (actually 0) + CanvasPanel's half-width
var centerY = offset.top + height / 2;   // CenterY is top offset of Header DIV (15px) + CanvasPanel's half-height

// Let the radius be the smaller of the width/height, divided by 2
var radius = Math.min(width,height) / 2;

var circle = new paper.Path.Circle(new paper.Point(centerX,centerY), radius);
circle.fillColor = 'white';
circle.strokeColor = 'black';
paper.view.draw();

CSS：要使顶部/底部divs跨越整个垂直屏幕，请使用绝对定位，如建议在这里。同样，画布本身为100％/100％。

#headerPanel {
    border-bottom: 1px solid black;
    width: 100%;
    height: 50px;
}

#canvasPanel {
  position: absolute;
  width:100%;
  top:50px;
  bottom:0;
}

#canvas {
    width: 100%;
    height: 100%;
}

html

<div id="headerPanel">
    Text
</div>

<div id="canvasPanel">
    <canvas id="canvas" resize></canvas>
</div>

Answer 1

如果您想在Paperjs View（Canvas）的中心绘制一个圆圈，那么我将如何做：

  const scope = new paper.PaperScope();
  project = new scope.Project(canvasElem);
  const centerOfCanvas = scope.view.center; // this is the center of the paperjs view/canvas
  const radius = Math.min(scope.view.bounds.width,scope.view.bounds.height) / 2;    
  const circle = new paper.Path.Circle(centerOfCanvas, radius);

您试图将派生的值从Canvas CSS位置和宽度派生到Paperjs View（Canvas），而我不在认为是1x1比较。