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

37次阅读

共计 526 个字符,预计需要花费 2 分钟才能阅读完成。

成果:

按键盘的高低箭头,能够对正方体的棱长进行缩放。

按键盘的左右箭头,能够对最下面的面的歪斜角度进行调整。

按住键盘 1,2,能够对正方体的斜边长度进行调整。

实现原理

变量 程度方向偏移量,用于定义第一个正方体绘制结束后,绘制第二个正方体的画笔终点的 x 坐标。这里的 y 坐标硬编码为 0.

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

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

当用户响应事件产生时,如果立方体棱长发生变化,记得同步更新程度方向的偏移量,使两个变量的值总是雷同,而后革除画笔,让之前绘制的图形从 canvas 上隐没,接着应用最新的棱长来绘制图形。

从最初保留的我的项目工程文件可能看出,kitten 里的变量很有意思,也能显示在画布上,不过大多数时候咱们都将 visible 属性设置为 false,将其暗藏:

并且咱们在我的项目里应用的音频文件,也是以 CDN 和嵌入的形式蕴含在内的。

kitten 编辑器里工具栏这些积木的程序:

toolbox_order 这个数组里定义:

这个在线的 kitten 编辑器,须要 WebGL 的反对。

在背包里新建我的素材集:

能够将素材挪动到背包里:

点击右键能够给积木增加全局正文:

点击某个积木,能够给其增加部分正文:

正文完
 0