javascript - PaperJS 在 mouseDown 上创建圆圈时遇到问题

Question

我正在尝试复制陶工的轮子效果，用户可以单击轮子的一 block ，按住鼠标，然后将相对于轮子的中心创建一个圆圈。

就像这个人的演示一样:https://balazsdavid987.github.io/Pottery-Wheel/

但是我可以在这里看到发生的事情: http://p2-paperjs-dpayne5-dpayne589733.codeanyapp.com:3000/coloring/

相关代码如下:

var tool = new paper.Tool();


        //array to hold all curves drawn from mousedrags
        var allPaths = [];

        var currPath;
        var rotationPath;

        //wheel center point, @center of canvas
        var wheelCenter = new paper.Point(350,350);

        //create the potters wheel
        var wheel = new paper.Path.Circle({
          center: wheelCenter,
          radius: 300,
          strokeColor: 'black',
          strokeWidth: 5
        });


        //hold down to create a continous curve with respect to wheelCenter
        tool.onMouseDown = function(event) {
          currPath = new paper.Path();
          currPath.strokeColor = cp.history[cp.history.length-1];
          currPath.strokeWidth = 10;

          currPath.add(event.point);

        }


        //creates a curve from the last position to the new position of mouse
        tool.onMouseDrag = function(event) {
          currPath.add(currPath.rotate(4, wheelCenter));

        }


        //add the curve to allPaths, which then gets animated in onFrame
        tool.onMouseUp = function(event) {
          allPaths.push(currPath);
        }


        paper.view.onFrame = function(event) {
          for (var i = 0; i < allPaths.length; i++) {
            allPaths[i].rotate(4, wheelCenter);
          }
          //testPath.rotate(3, wheelCenter);
        }


        paper.view.draw();

我不明白为什么 mouseDrag 会从我的鼠标单击的位置开始画一个圆圈，而且我已经被困在这个问题上有一段时间了。

任何帮助将不胜感激，谢谢!

Answer 1

除了 onMouseDrag 方法方面存在技术困难之外，我认为您应该改变解决问题的方法。
问题是，如果您依赖鼠标拖动事件(仅在鼠标移动时触发)，您将无法通过保持鼠标静态来在滚轮上绘画(如引用演示中所示)。
因此，您最好跟踪鼠标位置(通过监听鼠标移动事件)，并在每一帧上进行绘制，将最后一个鼠标位置添加到当前路径(当然仅在绘制时)。
胜过千言万语，这里是 sketch演示如何实现这一点。

// Create the wheel.
const wheel = new Path.Circle({
    center: view.center,
    radius: 300,
    strokeColor: 'black',
    strokeWidth: 3
});

// Create a group that will contain all the user drawn path.
// This will allow us to more easily rotate them together.
const paths = new Group();

// Init state variables.
let currentPath;
let drawing = false;
let lastMousePosition;

// On mouse down...
function onMouseDown(event) {
    // ...start a new path.
    currentPath = new Path({
        segments: [event.point],
        strokeColor: 'red',
        strokeWidth: 2
    });
    // Add it to the paths group.
    paths.addChild(currentPath);
    // Mark state as drawing.
    drawing = true;
}

// On mouse move...
function onMouseMove(event) {
    // ...keep track of the mouse position, this will be used to add points to
    // the current path on each frame.
    lastMousePosition = event.point;
}

// On mouse up...
function onMouseUp(event) {
    // ...improve performances by simplifying the path.
    currentPath.simplify();
    // Mark state as not drawing.
    drawing = false;
}

// On each frame...
function onFrame(event) {
    // ...rotate paths around the wheel center.
    paths.rotate(4, wheel.position);
    // If we are currently drawing...
    if (drawing) {
        // ...add the last mouse position to the current path.
        currentPath.add(lastMousePosition);
    }
}