Kitten 动态绘制 Y 轴方向立方体的实现方法

简介: Kitten 动态绘制 Y 轴方向立方体的实现方法

我们之前的实践里,已经探讨了在水平方向动态绘制立方体的积木搭建方法,如下图所示:

4e3b4a0414360dca1711f46dc2befe99.png

接下来我们期望在 Y 轴方向也绘制立方体,如下图所示。

13f2c06b22e5aa777a92c437c6cb4e71.png

其实只需要在水平方向依次绘制两列立方体就可以了。这两列立方体的初始顶点,我已经用黑色高亮了。

8ba9b1c28b4bcb46e30f843ed1d59a1a.png

首先我有一个绘制立方体的函数,这个函数里绘制两个正方形,分别是正方体面对我们那个面和背对我们的面,然后绘制四个斜面。

c0e220d4b6f21062543d4aa13f2a7a9c.png

这个函数的调用前提,是 x 方向动态立方体的 x 坐标已经设定好。这个坐标每绘制一个立方体之后,就会在循环里递增,步长是正方体棱长。

5f33a7b9425c64816b8a72f2a104dd72.png

x 方向动态立方体的 x 坐标,初始值为 X 方向立方体顶点 X 坐标,这个坐标是在循环体外部计算的,公式如下。

f451f355731406f1d83571ea1c5eb24b.png

在 Y 方向绘制一排新的立方体,关键是要找到第一个立方体的起始顶点的 X 和 Y 坐标。


我每次动态绘制 X 方向的立方体时,都会将计算好的第一个立方体的顶点,存储到变量起点X 和起点 Y 里,以备后续使用。


[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Rx4NW59-1675827193236)(null)]


这样,在绘制 Y 方向立方体时,我重新回到起点 X 和 Y,然后调整旋转角度,移动到斜边的另一个顶点,此时这个顶点的 X 和 Y 坐标,就是新的一排待绘制的立方体的初始X 和 Y 坐标。

6ce0f3a0c4987fda6c91d56bfb6b3d26.png

换言之,调用从左到右绘制全部立方体函数之前,必须保证起点的 X 和 Y 坐标被成功计算出来才行,后者又依赖变量起点 X 和 Y。

相关文章
|
5月前
cavans图形绘制(直线、矩形、原型、贝塞尔曲线、渐变背景) 2
cavans图形绘制(直线、矩形、原型、贝塞尔曲线、渐变背景) 2
|
5月前
cavans图形绘制(直线、矩形、原型、贝塞尔曲线、渐变背景) 1
cavans图形绘制(直线、矩形、原型、贝塞尔曲线、渐变背景)
|
6月前
|
移动开发 前端开发 JavaScript
html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
205 0
html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
|
6月前
|
监控 API 计算机视觉
OpenCV这么简单为啥不学——1.4、基础标识绘制(绘制线line函数、rectangle函数绘制四边形、circle函数绘制圆形、putText函数绘制文字、putText绘制中文文字)
OpenCV这么简单为啥不学——1.4、基础标识绘制(绘制线line函数、rectangle函数绘制四边形、circle函数绘制圆形、putText函数绘制文字、putText绘制中文文字)
60 0
cesium中绘制立方体、设置材质、操作相机及获取鼠标经纬度和高度的方法
cesium中绘制立方体、设置材质、操作相机及获取鼠标经纬度和高度的方法
229 0
如何在 kitten 里生成动态个数个立方体(水平方向平铺)以及避免闪烁问题
如何在 kitten 里生成动态个数个立方体(水平方向平铺)以及避免闪烁问题
使用 Kitten 编程猫绘制一个 Y 方向平铺的立方体集合
使用 Kitten 编程猫绘制一个 Y 方向平铺的立方体集合
如何在 kitten 里生成动态个数个立方体(水平方向平铺)以及避免闪烁问题(2)
如何在 kitten 里生成动态个数个立方体(水平方向平铺)以及避免闪烁问题
如何在 kitten 里生成动态个数个立方体(水平方向平铺)以及避免闪烁问题(2)
|
存储
Kitten 动态绘制 Y 轴方向立方体的实现方法
Kitten 动态绘制 Y 轴方向立方体的实现方法