Question

我发现，由于椭圆和矩形具有完全相同的方法调用，因此我会通过抽象两个之间的单个函数来做到这一点。

这是设置drawaction()的前端

    <div class="btn">
        <img class="icon rect" src="images/png/rectangle.png" alt="Rectangle Tool" onclick="drawaction('rect');">
    </div>
    <div class="btn">
        <img class="icon circ" src="images/png/oval.png" alt="Circle Tool" onclick="drawaction('ellipse');">
    </div>

处理drawaction()的方法如下。

function drawaction(drawtype) {
    switch (drawtype) {
        case 'rect':
            makeitem.circrect('rect');
            layer += 1;
            break;

        case 'ellipse':
            makeitem.circrect('ellipse');
            layer += 1;
            break;

        case 'grid':

            break;

        default:
            break;
    }
}

该开关在抽签的肉和土豆所在的地方调用此功能。

let makeitem = {
    circrect(type) {
        drawing.on('mousedown', function (e) {
            console.log(layer);
            item[layer] = drawing[type]().attr('stroke-width', 1).attr('fill', 'none').draw({snapToGrid: 20});
            item[layer].draw(e);
            document.addEventListener('keydown', function (keytog) {
                if (keytog.keyCode == 17 && item[layer]) {
                    item[layer].draw('param', 'snapToGrid', 1);
                }
            });

            document.addEventListener('keyup', function (e) {
                if (item[layer]) {
                    item[layer].draw('param', 'snapToGrid', 20);
                }
            });

        }, false);

        drawing.on('mouseup', function (e) {
            console.log(layer);
            item[layer].draw('stop', e);
        }, false);
    }
}

在前端选择rect。然后单击并按住以进行绘制，type以ellipse或rect的形式传入，松开以结束绘制。

第一次选择其中一个时，一切都会消失，并且运行正常。但是选择另一个作为第二选择，两者都被绘制。

顶部形状是在页面加载并选择“矩形”之后。底部形状是在矩形之后选择了“椭圆”之后。如果我先选择“椭圆”，它将先绘制一个椭圆，然后再绘制两次。

我不想要双抽奖。如何使其停止？

svg.draw.js同时绘制2个元素

0 个答案: