Question

你如何在画布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/

Answer 1

也许使用Polygon代替？这是一个例子;

http://jsfiddle.net/Ygnbb/

我将3个部分分开，但我猜你可以做一个ploygon。虽然位置和大小需要调整......

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

1 个答案: