0

我在 View 类中使用 Canvas 绘制一些位图。用户滑动以更改位图。我想以这种方式动画位图之间的切换：

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

有什么帮助来实现这一目标吗？

4

1 回答 1

0

Here is a 2d simulation of a rotating 3d cube.

Wish I could say I did it myself, but I originally got the code here: http://codentronix.com/2011/05/10/html5-experiment-a-rotating-solid-cube/

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/3PwYm/

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Experiment: A Rotating Solid Cube</title>
    <script type="text/javascript">
        window.onload = startDemo;

        function Point3D(x,y,z) {
            this.x = x;
            this.y = y;
            this.z = z;

            this.rotateX = function(angle) {
                var rad, cosa, sina, y, z
                rad = angle * Math.PI / 180
                cosa = Math.cos(rad)
                sina = Math.sin(rad)
                y = this.y * cosa - this.z * sina
                z = this.y * sina + this.z * cosa
                return new Point3D(this.x, y, z)
            }

            this.rotateY = function(angle) {
                var rad, cosa, sina, x, z
                rad = angle * Math.PI / 180
                cosa = Math.cos(rad)
                sina = Math.sin(rad)
                z = this.z * cosa - this.x * sina
                x = this.z * sina + this.x * cosa
                return new Point3D(x,this.y, z)
            }

            this.rotateZ = function(angle) {
                var rad, cosa, sina, x, y
                rad = angle * Math.PI / 180
                cosa = Math.cos(rad)
                sina = Math.sin(rad)
                x = this.x * cosa - this.y * sina
                y = this.x * sina + this.y * cosa
                return new Point3D(x, y, this.z)
            }

            this.project = function(viewWidth, viewHeight, fov, viewDistance) {
                var factor, x, y
                factor = fov / (viewDistance + this.z)
                x = this.x * factor + viewWidth / 2
                y = this.y * factor + viewHeight / 2
                return new Point3D(x, y, this.z)
            }
        }

        var vertices = [
            new Point3D(-1,1,-1),
            new Point3D(1,1,-1),
            new Point3D(1,-1,-1),
            new Point3D(-1,-1,-1),
            new Point3D(-1,1,1),
            new Point3D(1,1,1),
            new Point3D(1,-1,1),
            new Point3D(-1,-1,1)
        ];

        // Define the vertices that compose each of the 6 faces. These numbers are
        // indices to the vertex list defined above.
        var faces  = [[0,1,2,3],[1,5,6,2],[5,4,7,6],[4,0,3,7],[0,4,5,1],[3,2,6,7]];

        // Define the colors for each face.
        var colors = [[255,0,0],[0,255,0],[0,0,255],[255,255,0],[0,255,255],[255,0,255]];

        var angle = 0;

        /* Constructs a CSS RGB value from an array of 3 elements. */
        function arrayToRGB(arr) {
            if( arr.length == 3 ) {
                return "rgb(" + arr[0] + "," + arr[1] + "," + arr[2] + ")";
            }
            return "rgb(0,0,0)";
        }

        function startDemo() {
            canvas = document.getElementById("thecanvas");
            if( canvas && canvas.getContext ) {
                ctx = canvas.getContext("2d");
                setInterval(loop,33);
            }
        }

        function loop() {
            var t = new Array();

            ctx.fillStyle = "rgb(0,0,0)";
            ctx.fillRect(0,0,400,250);

            for( var i = 0; i < vertices.length; i++ ) {
                var v = vertices[i];
                var r = v.rotateX(angle).rotateY(angle);
                var p = r.project(400,250,200,4);
                t.push(p)
            }

            var avg_z = new Array();

            for( var i = 0; i < faces.length; i++ ) {
                var f = faces[i];
                avg_z[i] = {"index":i, "z":(t[f[0]].z + t[f[1]].z + t[f[2]].z + t[f[3]].z) / 4.0};
            }

            avg_z.sort(function(a,b) {
                return b.z - a.z;
            });

            for( var i = 0; i < faces.length; i++ ) {
                var f = faces[avg_z[i].index]

                ctx.fillStyle = arrayToRGB(colors[avg_z[i].index]);
                ctx.beginPath()
                ctx.moveTo(t[f[0]].x,t[f[0]].y)
                ctx.lineTo(t[f[1]].x,t[f[1]].y)
                ctx.lineTo(t[f[2]].x,t[f[2]].y)
                ctx.lineTo(t[f[3]].x,t[f[3]].y)
                ctx.closePath()
                ctx.fill()
            }
            angle += 2
        }
    </script>
</head>
<body>
        <canvas id="thecanvas" width="400" height="250">
        Your browser does not support the HTML5 canvas element. <a href=#>Click here</a> to watch the video.
    </canvas>

    </body>
</html>
于 2013-03-06T17:51:23.443 回答