0

我正在开展一项活动，用户将绘制折线图并检查它与实际图表的接近程度。我已经开始工作了，但在“重置”画布方面需要帮助。我可以清除它，但我需要在清除后重新初始化它，以便用户可以重试。

这是我到目前为止的重置代码：

var clearCanvas = false;

function onFrame(event) {
    if (clearCanvas && project.activeLayer.hasChildren()) {
        project.activeLayer.removeChildren();
        clearCanvas = false;
    }
}
$('.clear').on('click', function() {
    clearCanvas = true;
    return false
})

这是一个jsfiddle

由于我不是编码员，所以我将这段代码拼凑在一起，所以如果这不是最好的做事方式，那就放轻松。如果有人有更清洁/更有效的方式来做到这一点，我会全力以赴！

提前致谢。小号

4

1 回答 1

0

首先，当您的 jsfiddle 尝试使用“ http://paperjs.org/static/js/paper.js ”时，它会收到 404。将其切换为“ https://raw.github.com/paperjs/paper.js/master/dist/paper.js ”对我有用。

其次，如果您希望用户再试一次，他们需要能够在重置后放置 7 个（或多个）新点，因此在您的onFrame函数中，您需要maxPoints在清除画布时设置为 0。

第三，连接用户点的路径需要重新初始化。这可以通过调用path.removeSegments()然后重新添加path到activeLayer.

第四，一旦你从 activeLayer 中移除了孩子，fullChart（“答案”）就不再在 activeLayer 上。您必须重新添加它并将其不透明度重新设置为 0（如果您想再次隐藏它）。

将它们放在一起，这onFrame似乎可以满足您的要求：

function onFrame(event) {
    if (clearCanvas && project.activeLayer.hasChildren()) {
        project.activeLayer.removeChildren();
        fullChart.opacity = 0;
        maxPoints = 0;
        path.removeSegments();
        project.activeLayer.addChildren([fullChart, path]);
        clearCanvas = false;
    }
}

这是一个jsfiddle。

其他注意事项：

我不相信你必须像那样分离你的代码；您可以在按钮的回调中清除画布，而不是等待onFrame. 所以所有代码都onFrame可以进入回调（只是没有clearCanvas变量）。

我还建议Point为您的 myCircle 和 myPath 使用相同的对象，而不是创建具有相同坐标的新对象。例如：

var point1 = new Point(72, 214);
var point2 = new Point(205, 177);
...
var point7 = new Point(868, 177);
var myCircle1 = new Path.Circle(point1, 10)
var myCircle2 = new Path.Circle(point2, 10)
....
var myCircle7 = new Path.Circle(point7, 10)
var myPath = new Path([point1, point2, ..., point7]);
于 2013-08-01T19:50:44.553 回答