panzoom.js和paper.js补偿点的比例

Question

目的是将图像放在画布上，在能够平移和缩放的同时在其上绘图。我正在使用panzoom.js和paper.js

什么有用...... 我可以平移和缩放画布。 我可以画上canvaas

什么行不通...... 一旦我放大 - 事情就变坏了。论文＆＃34;点＆＃34;不再显示与鼠标箭头对应。放大后，某种因素似乎已关闭，屏幕上绘制的内容与指针有一定距离

如何补偿paper.js指向画布上的缩放系数？

HTML

<div id="container">
    <canvas id="myImage" width="612" height="792px">
        <img id="page" src="page.png" width="100%" height="100%">
    </canvas>
</div>
<img id="first" src="page.png" width="612" height="792" style="display:none">

对于panzoom.js ..

var $panzoom = $('#myImage').panzoom();

$panzoom.parent().on('mousewheel.focal', function( e ) {
    e.preventDefault();
    var delta = e.delta || e.originalEvent.wheelDelta;
    var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
    $panzoom.panzoom('zoom', zoomOut, {
        increment: 0.1,
        animate: false,
        focal: e
    });
  });

和paper.js ......

<script type="text/paperscript" canvas="myImage">

var raster = new Raster('first');
raster.position = view.center;
raster.scale(1);

tool.maxDistance = 10;

function onMouseDrag(event) {
    var circle = new Path.Circle({
        center: event.middlePoint,
        radius: event.delta.length / 2
    });
    circle.fillColor = 'black';
}