效果：
![](https://img-blog.csdnimg.cn/img_convert/8865a6f08e5d690e6db5d6b1b43b14bb.png)

按键盘的上下箭头，可以对正方体的棱长进行缩放。

![](https://img-blog.csdnimg.cn/img_convert/cec8466dc630343fa38d2a3ec66ad0b0.png)

按键盘的左右箭头，可以对最上面的面的倾斜角度进行调整。

![](https://img-blog.csdnimg.cn/img_convert/a05890abc8516171ed76a46440a40692.png)

按住键盘1，2，可以对正方体的斜边长度进行调整。

![](https://img-blog.csdnimg.cn/img_convert/b04a19f49fe7467afa32797375cb9213.png)

# 实现原理

变量`水平方向偏移量`，用于定义第一个正方体绘制完毕后，绘制第二个正方体的画笔起点的 x 坐标。这里的 y 坐标硬编码为 0.

这个偏移量的值永远等于立方体的棱长。

![](https://img-blog.csdnimg.cn/img_convert/1443886c24f8a017a64b96f0d393fd37.png)

在绘制两个正方体的函数里，分别从(0，0)和(偏移量，0) 两个点开始绘制正方体。

![](https://img-blog.csdnimg.cn/img_convert/5212d5f61dd4c61d05d50dc5a4e470f6.png)

当用户响应事件发生时，如果立方体棱长发生变化，记得同步更新水平方向的偏移量，使两个变量的值总是相同，然后清除画笔，让之前绘制的图形从 canvas 上消失，接着使用最新的棱长来绘制图形。

![](https://img-blog.csdnimg.cn/img_convert/7d7195768be1c73acc1698189753ec01.png)

从最后保存的项目工程文件能够看出，kitten 里的变量很有意思，也能显示在画布上，不过大多数时候我们都将 visible 属性设置为 false，将其隐藏：
![](https://img-blog.csdnimg.cn/img_convert/9338efa11dbf841e753273adef8b67bb.png)

并且我们在项目里使用的音频文件，也是以 CDN 和嵌入的方式包含在内的。
![](https://img-blog.csdnimg.cn/img_convert/3b2d9c3c7ce981dfd53695e53eb67128.png)

kitten 编辑器里工具栏这些积木的顺序：

![](https://img-blog.csdnimg.cn/img_convert/abe59c74f38e93bacc295c76b9cad8bb.png)

在 `toolbox_order` 这个数组里定义：

![](https://img-blog.csdnimg.cn/img_convert/ecc9a4bd920793a44f98ede8a99120cb.png)

这个在线的 kitten 编辑器，需要 WebGL 的支持。

![](https://img-blog.csdnimg.cn/img_convert/80d611eef0817acafe79de4224057e79.png)

在背包里新建我的素材集：
![](https://img-blog.csdnimg.cn/img_convert/47a5fe349ef9a42eeafcce5980236896.png)

可以将素材移动到背包里：
![](https://img-blog.csdnimg.cn/img_convert/4553ae0da511f441d94c597aebb59854.png)

点击右键可以给积木添加全局注释：
![](https://img-blog.csdnimg.cn/img_convert/e5eb7bfa7d7e616251f44d980dc3cfd5.png)

点击某个积木，可以给其添加局部注释：
![](https://img-blog.csdnimg.cn/img_convert/30cddd3c0f212a762e37ccd72cbdd053.png)

ITPub博客

如何在 Kitten 里绘制两个相邻的正方体并响应用户输入事件

最新文章