2

キャンバス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>

</p>

デモ: http://jsfiddle.net/F5SzS/

4

1 に答える 1

0

代わりにPolygonを使用しますか？これが例です。

http://jsfiddle.net/Ygnbb/

私は3つのパーツを別々に作成しましたが、私が推測する1つのプロイゴンとしてそれを行うことができます。ただし、位置とサイズには微調整が必​​要です...

于 2012-09-09T16:18:07.377 に答える