html画布中的等轴测立方体投影

如何在画布2d中绘制等轴测立方体？我用HTML5 Canvas遵循了True Isometric Projection来获得立方体的顶部，但你如何处理左侧和右侧？

注意：我想使用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/

也许可以使用多边形？下面是一个例子；

http://jsfiddle.net/Ygnbb/

我把三个部分分开，但我想你可以把它作为一个部分。位置和尺寸需要调整。。。

相关内容

最新更新

热门标签：