JS实现类似CAD的获取点

JS通过async/await、Promise相结合的方式等待获取点。

async drawLine() {
    let sp = await this.getPoint({
	msg: "指定第一个点:"
    });
    let ep = await this.getPoint({
	msg: "指定下一点:"
    });
    var line = window.svg.shape.Line.prototype.createLine(sp.userPt, ep.userPt);
    if (line) {
	var layer = window.svg.diagramManager.getLayer("0");
	layer.appendChild(line);
    }
}

上面代码实现了画线的过程，用了两次await来获取起点和终点，其中createLine和getLayer函数，用到了本人的网页CAD框架，可以用其它方式替代。

那么getPoint怎么实现呢？

async getPoint(resolve) {
    resolve = resolve || {};
    return new Promise((resolve, reject) => {
        this.promiseResolve = resolve
    });
}

这里用到了Promise，等待鼠标点击时处理resolve。

鼠标点击的事件

async onMouseDown(e) {
    return this.promiseResolve(e);
}

这样就触发了resolve回调，实现了获取点。

注：这里没有对错误、异常等情况进行处理。