html画布中的等距立方体投影答案

【问题标题】：Isometric cube projection in html canvashtml画布中的等距立方体投影
【发布时间】：2012-08-31 19:02:53
【问题描述】：

你如何在canvas 2d中做等距立方体？我已经跟着True Isometric Projection with HTML5 Canvas拿到了立方体的顶部，但是左右两边怎么做呢？

注意：我想使用 Kinetic.js 对象，其事件处理功能完好无损。

这就是我现在拥有的：

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"></script>
    <script>
      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: "container",
          width: 578,
          height: 200,
          //scale: [1, 0.5],
          //scale: [1, 0.86062],
          //rotation: -30 * Math.PI /180,
        });

        var layer = new Kinetic.Layer({
            scale: [1,0.5],
        });

        var foo = false;

        layer.beforeDraw(function(){
            if (!foo) {
                var context = this.getContext();
                var sx = 45*Math.PI/180;
                // .75 horizontal shear
                var sy = 0;
                // no vertical shear

                // apply custom transform
                //context.transform(1, sy, sx, 1, 0, 0);
                //context.scale(1, 0.5);
                //context.rotate(45 * Math.PI /180);
                //var angle = 30;
                //context.setTransform(1, Math.tan(30), 0, 1, 0, 0);
            }
            foo = true;

        });



        layer.afterDraw(function(){
            var context = this.getContext();

            //context.scale(1, 2);
            //context.rotate(-45 * Math.PI /180);

        });



        var rect = new Kinetic.Rect({
          x: 200,
          y: 100,
          width: 50,
          height: 50,
          fill: "blue",
          stroke: "black",
          strokeWidth: 4,

          rotation: -45 * Math.PI /180,
          //scale: [1, 0.5],

        });





        rect.on("mouseover", function() {
                //alert(this.getFill());
                this.setFill("red");

                layer.draw();
         });   

         rect.on("mouseout", function() {
                //alert(this.getFill());
                this.setFill("blue");

                layer.draw();
         });  

        // add the shape to the layer
        layer.add(rect);

    // add the layer to the stage
    stage.add(layer);

  };

</script>

演示：http://jsfiddle.net/F5SzS/

【问题讨论】：

标签： javascript html isometric

【解决方案1】：

也许改用多边形？这是一个例子；

http://jsfiddle.net/Ygnbb/

我将 3 个部分分开，但我猜你可以将其作为一个多边形来完成。位置和大小需要一些调整...

【讨论】：