AutoJs学习-Canvas实现立方体动画

• 点击跳转=>《导航贴》- Unity手册，系统实战学习
• 点击跳转=>《导航贴》- Android手册，重温移动开发

👉关于作者

众所周知，人生是一个漫长的流程，不断克服困难，不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考，于是我决定将自己的思考，经验和故事全部分享出来，以此寻找共鸣 ！！！
专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等）
有什么需要欢迎私我，交流群让学习不再孤单。

本文约6千字，新手阅读需要8分钟，复习需要3分钟 【收藏随时查阅不再迷路】

👉实践过程

"ui";

ui.layout(
    <vertical>
        <canvas id="board" layout_weight="1"/>
    </vertical>
);

//尺寸
const size = 100;


//原坐标
var cube = {
    p1: [-1,-1, 1],
    p2: [-1,-1,-1],
    p3: [ 1,-1,-1],
    p4: [ 1,-1, 1],
    p5: [-1, 1, 1],
    p6: [-1, 1,-1],
    p7: [ 1, 1,-1],
    p8: [ 1, 1, 1]

}
var cube2 = cube
var degree = {
    x: 0,
    y: 0,
    z: 0
}
var o = [0, 0, 0]
var paint = new Paint();
ui.board.on("draw", function(canvas) {
    //绘制背景色
    canvas.drawColor(colors.BLACK);
    //绘制分数
    paint.setColor(colors.BLACK);
    paint.setTextSize(50);
    //canvas.drawText(degree.x);
    toast(JSON.stringify(degree,null,4))
    paint.setStrokeWidth(5);
    var offset = {
        x: 540,
        y: 1000
    };
    //偏移坐标
    canvas.translate(offset.x, offset.y);
    //绘制围墙
    cube2.p1 = rotate(cube.p1, o, degree)
    cube2.p2 = rotate(cube.p2, o, degree)
    cube2.p3 = rotate(cube.p3, o, degree)
    cube2.p4 = rotate(cube.p4, o, degree)
    cube2.p5 = rotate(cube.p5, o, degree)
    cube2.p6 = rotate(cube.p6, o, degree)
    cube2.p7 = rotate(cube.p7, o, degree)
    cube2.p8 = rotate(cube.p8, o, degree)
    //toast(JSON.stringify(cube.p1,null,4))
    paint.setColor(colors.RED);
    line(canvas, paint, cube2.p1, cube2.p2)
    //paint.setColor(colors.GREEN);
    line(canvas, paint, cube2.p2, cube2.p3)
    //paint.setColor(colors.BLUE);
    line(canvas, paint, cube2.p3, cube2.p4)
    line(canvas, paint, cube2.p4, cube2.p1)
    
    line(canvas, paint, cube2.p5, cube2.p6)
    line(canvas, paint, cube2.p6, cube2.p7)
    line(canvas, paint, cube2.p7, cube2.p8)
    line(canvas, paint, cube2.p8, cube2.p5)
    line(canvas, paint, cube2.p5, cube2.p1)
    line(canvas, paint, cube2.p6, cube2.p2)
    line(canvas, paint, cube2.p7, cube2.p3)
    line(canvas, paint, cube2.p8, cube2.p4)
    
    /*line(canvas, paint, cube2.p4, cube2.p1)
    line(canvas, paint, cube2.p4, cube2.p2)
    line(canvas, paint, cube2.p4, cube2.p3)*/
});
//重力感应监听
sensors.register("gyroscope", sensors.delay.game).on("change", (event, azimuth, pitch, roll) => {
    degree.x = azimuth;
    degree.y = pitch;
    if (pitch < -90) {
        a = -roll - 180
    } else if (pitch > 90) {
        a = -roll + 180
    } else {
        a = roll
    }
    degree.z = a
});




//连线
function line(canvas, paint, p1, p2) {
    x1 = p1[0] * size
    y1 = p1[1] * size
    x2 = p2[0] * size
    y2 = p2[1] * size
    canvas.drawLine(x1, y1, x2, y2, paint);
}

//三轴矩阵旋转
function rotate(p1, p2, d) {

    x = p1[0] - p2[0]
    y = p1[1] - p2[1]
    z = p1[2] - p2[2]
    var ix = 0,
        iy = 0,
        iz = 0
    iy = y * Math.cos(d.x * Math.PI / 180) - z * Math.sin (d.x * Math.PI / 180)
    z = y * Math.sin(d.x * Math.PI / 180) + z * Math.cos(d.x * Math.PI / 180)
    y = iy
    ix = x * Math.cos(d.z * Math.PI / 180) - y * Math.sin(d.z * Math.PI / 180)
    y = x * Math.sin(d.z * Math.PI / 180) + y * Math.cos(d.z * Math.PI / 180)
    x = ix
    ix = x * Math.cos(d.y * Math.PI / 180) - z * Math.sin(d.y * Math.PI / 180)
    z = x * Math.sin(d.y * Math.PI / 180) + z * Math.cos(d.y * Math.PI / 180)
    x = ix
    return [x + p2[0], y + p2[1], z + p2[2]]
}

👉其他

📢作者：小空和小芝中的小空
📢转载说明-务必注明来源：https://zhima.blog.csdn.net/
📢这位道友请留步☁️，我观你气度不凡，谈吐间隐隐有王者霸气💚，日后定有一番大作为📝！！！旁边有点赞👍收藏🌟今日传你，点了吧，未来你成功☀️，我分文不取，若不成功⚡️，也好回来找我。

温馨提示：点击下方卡片获取更多意想不到的资源。