关于javascript:一个玩具NewbieGraph不是阿猫阿狗能叫大牛

前言

我当初平时在家很少写代码，以看书为主。

为啥呢？
一是，我是感觉我技术还是有很多中央须要进步的。其次，尽管大部分工具，看一眼就晓得它大略怎么实现的了。然而欠缺的工业级工具，是须要一直迭代和打磨的。

周末花了点工夫，利用 canvas 写了一个玩具。然而很多性能必定是没有实现的，比方旋转，自适应, 设置色彩，大小调整，各种 text，多级菜单，高亮等等。还有很多操作逻辑什么也没有实现。

为什么要实现这个？

往年见过太多的程序员，比方，一个程序员说，”mysql 的最大容量只有 1T”。另一个程序员说过，“我这个是真 3D，因为是应用 opengl 实现的”。一个运维，连 CI 和 CD 都不晓得是什么，感觉只会装零碎的。

唉，迷之自信，送上一句我喜爱的名言：

talking is cheap, show me the code

性能

这个货色就是个玩具，代码嘛，品质也不高。必定是有 bug 的。然而就当初这个品质，也比有些公司的品质要高。我有工夫应该也会迭代它的。

目前的性能

画线

画一条线，感觉点击算法，有点问题。

画圆

画矩形

组合

通过 shift 加点击，能够实现上述图形的组合

挪动的性能

右键菜单

右键菜单也是应用 canvas 实现的。目前性能性能只实现了复制，删除，粘贴。

文字

文字也是应用 canvas，一开始感觉性能是实现了，然而起初想了一下，还是又很多操作逻辑须要考虑一下的。

什么价值?

• 尽管它尽管是一个玩具，然而它能够讥嘲他人
• 它是一个画图工具，尽管目前性能不够不欠缺，然而构造实现了
• 通过组合，他能够实现一个类图

// 第一个 composite 的其实地位是（0，0）let composite = new CompositeItem(new Array(rect, line1, line2, circle, 
text, name1, property1, property2, method1, method2));
composite.setDrawContext(drawContext);

let composite1 = composite.copy();
composite1.moverunning(new Point(150, 10));
console.log(composite1);
drawContext.pushAItem(composite1);

let composite2 = composite.copy();
composite2.moverunning(new Point(300, 10));
console.log(composite2);
drawContext.pushAItem(composite2);

drawContext.draw();

如下图所示

• 通过组合, 它能够实现简略的电路图逻辑

let circle = new Circle(new Point(100,100), 2);
let line =new Line(new Point(100,100), new Point(130, 80));
let composite = new CompositeItem(new Array(line, circle));
composite.setDrawContext(drawContext);
drawContext.pushAItem(composite);
drawContext.draw();
....

如下图所示

游乐场

NewbieGraph