80｜Line Editor （2）：如何重构生成与更新锚点控制点的逻辑？

徐昊

你好，我是徐昊。今天我们继续使用 TDD 的方式实现一个线段编辑器。
回顾任务与代码目前代码为：
import Konva from "konva";
export class LineEditor extends Konva.Group {
    private line?: Konva.Line
    attach(line: Konva.Line) {
        let points = line.points()
        let previous = -1
        for (let i = 0; i < points.length / 2; i++) {
            this.add(new Konva.Circle({name: `${i}-anchor`, radius: 10, x: points[i * 2], y: points[i * 2 + 1]}))
            if (previous !== -1)
                this.add(new Konva.Circle({
                    name: `${i}-control`, radius: 10,
                    x: points[previous * 2] + (points[i * 2] - points[previous * 2]) / 2,
                    y: points[previous * 2 + 1] + (points[i * 2 + 1] - points[previous * 2 + 1]) / 2
                }))
            previous = i
        }
        this.line = line
        line.on('pointsChange', () => {
            this.update()
        })
    }
    update() {
        let points = this.line!.points()
        let previous = -1
        for (let i = 0; i < points.length / 2; i++) {
            this.findOne(`.${i}-anchor`).setAttrs({x: points[i * 2], y: points[i * 2 + 1]})
            if (previous !== -1)
                this.findOne(`.${i}-control`).setAttrs({
                    x: points[previous * 2] + (points[i * 2] - points[previous * 2]) / 2,
                    y: points[previous * 2 + 1] + (points[i * 2 + 1] - points[previous * 2 + 1]) / 2
                })
            previous = i
        }
    }
}

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

本文介绍了徐八叉关于线段编辑器的重构生成与更新锚点控制点逻辑的讨论。作者使用TDD的方式实现了一个线段编辑器，并回顾了任务与代码。文章中提到了任务列表，包括设置锚点、生成锚点、更新锚点位置、设置控制点等。作者还提出了一些思考题，例如如何测试UI的样式。整体来看，文章涉及了Konva库的使用、TDD开发方式以及UI样式测试等技术内容。文章内容丰富，适合对线段编辑器开发感兴趣的读者阅读。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《徐昊 · TDD 项目实战 70 讲》，新⼈⾸单¥98

立即购买

登录后留言

全部留言(1)

最新
精选

davix
老師，實際開發時，會實現了這些任務還看不到頁面啥樣嗎？ TDD時每完成一個任務是不是也結合一個手工UI測試？要不那些 .on 啊，.fire啊，哪些參數啥都不知道生沒生效。最後少刪一些線等情況沒有實際看到UI，單純頭腦想也很容易忽略。
2022-09-19归属地：北京
1
1

收起评论