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

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

效果:

8865a6f08e5d690e6db5d6b1b43b14bb.png

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

cec8466dc630343fa38d2a3ec66ad0b0.png

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

a05890abc8516171ed76a46440a40692.png

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

b04a19f49fe7467afa32797375cb9213.png


实现原理


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

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

1443886c24f8a017a64b96f0d393fd37.png

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

5212d5f61dd4c61d05d50dc5a4e470f6.png

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

7d7195768be1c73acc1698189753ec01.png

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

9338efa11dbf841e753273adef8b67bb.png

并且我们在项目里使用的音频文件,也是以 CDN 和嵌入的方式包含在内的。

3b2d9c3c7ce981dfd53695e53eb67128.png

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

abe59c74f38e93bacc295c76b9cad8bb.png

toolbox_order 这个数组里定义:

ecc9a4bd920793a44f98ede8a99120cb.png

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

80d611eef0817acafe79de4224057e79.png

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

47a5fe349ef9a42eeafcce5980236896.png

可以将素材移动到背包里:

4553ae0da511f441d94c597aebb59854.png

点击右键可以给积木添加全局注释:

e5eb7bfa7d7e616251f44d980dc3cfd5.png

点击某个积木,可以给其添加局部注释:

30cddd3c0f212a762e37ccd72cbdd053.png

相关文章
|
5月前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
3月前
|
前端开发
Canvas绘画之三条二次方贝塞尔曲线构成的复选框标记对号
Canvas绘画之三条二次方贝塞尔曲线构成的复选框标记对号
|
5月前
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
|
定位技术
百度地图开发:批量增加折线、多边形覆盖物的封装函数
百度地图开发:批量增加折线、多边形覆盖物的封装函数
75 0
|
5月前
|
监控 API 计算机视觉
OpenCV这么简单为啥不学——1.4、基础标识绘制(绘制线line函数、rectangle函数绘制四边形、circle函数绘制圆形、putText函数绘制文字、putText绘制中文文字)
OpenCV这么简单为啥不学——1.4、基础标识绘制(绘制线line函数、rectangle函数绘制四边形、circle函数绘制圆形、putText函数绘制文字、putText绘制中文文字)
55 0
|
12月前
|
存储 前端开发
canvas自定义绘制顺序解决遮挡问题
canvas自定义绘制顺序解决遮挡问题
205 0
Kitten 动态绘制 Y 轴方向立方体的实现方法
Kitten 动态绘制 Y 轴方向立方体的实现方法
|
C# 图形学
C#绘制自定义小人
C#绘制自定义小人
射线法——判断一个点是否在多边形内部(适用于凸多边形和凹多边形)【关键原理解释+文字伪代码】
射线法——判断一个点是否在多边形内部(适用于凸多边形和凹多边形)【关键原理解释+文字伪代码】
625 0
如何在 Kitten 里绘制两个相邻的正方体并响应用户输入事件(1)
如何在 Kitten 里绘制两个相邻的正方体并响应用户输入事件