Question

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

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

var clearCanvas = false;

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

Here is a jsfiddle

我有点黑客攻击这些代码，因为我不是编码员，所以如果这不是最好的做事方式，那就轻松一点。如果有人有一个更清洁/更有效的方式这样做我全都耳朵！

提前致谢。小号

Answer 1

首先，当你的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变量）。

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

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

清除html5画布，然后重新初始化它

1 个答案: