javascript - YUI 框架绘制一行并删除上一行

Question

我想在点击鼠标的时候画一条线，去掉之前的线。这是来自 jsfiddle.net 的链接，链接是 there .

在我的代码中，我实现了在单击鼠标时画一条线。但不能删除前一行。我想删除上一行。有人可以帮助我吗？非常感谢!

这是 YUI 代码:

YUI().use('event', 'node', 'graphics', function (Y) {
var mygraphic = new Y.Graphic({
    render: "#play"
});

Y.one('#play').on('click', function (e) {
    var bob = mygraphic.addShape({
        type: "path",
        stroke: {
            weight: 4,
            color: "#00dd00"
        },
        fill: {
            type: "linear",
            stops: [{
                color: "#cc0000",
                opacity: 1,
                offset: 0
            }, {
                color: "#00cc00",
                opacity: 0.3,
                offset: 0.8
            }]
        }
    });
    if (bob) {
        bob.moveTo(100, 100);
        bob.lineTo(e.clientX, e.clientY);
        bob.end();
        bob.closePath();
        //mygraphic.removeShape(bob);
    }
});

});

这是 html 和 css 代码:

<div id="play"></div>

#play {
    width:400px;
    height:300px;
    border:1px solid black;
}

Answer 1

您需要对先前绘制的线条的引用，以便您可以在随后的点击中将其删除。我在这里更新了你的 jsfiddle:http://jsfiddle.net/s9b67qc9/11/但想法是使用在外部作用域中定义的变量(即 YUI.use() 回调的作用域，而不是 'click' 回调的作用域)。这被设置为 bob，然后 oldBob 从 Graphic 中删除。

现在你有:

var mygraphic = new Y.Graphic({
        render: "#play"
    }),
    oldBob;

在事件监听器中:

if (bob) {
    bob.moveTo(100, 100);
    bob.lineTo(e.clientX, e.clientY);
    bob.end();
    bob.closePath();

    if (oldBob) {
        mygraphic.removeShape(oldBob);
    }
    oldBob = bob;
}