1

キャンバスの使い方を学び始めて 2 日が経ちましたが、ここで...行き詰まりました。

下から上に向かって「ツリー」を描画するアルゴリズムを作成したいと考えていました。

これが私のコードです:

var newX = 0;
var baseTaille = 20;
var lines = [];
var maxLines = 20;
var baseLifeTime = 50;
var timer = 0;

function Point (x,y) {
    this.x = x;
    this.y = y;
}
function Line(origin,direction,taille,ancestor,endingPoint)
{
  this.origin = new Point(origin.x,origin.y);
  this.direction = direction;
  this.taille = taille;
  this.ancestor = ancestor;
  this.endingPoint = new Point(endingPoint.x,endingPoint.y);
  this.lifeTime = taille;
}
var canvas;
var context;
$(document).ready(function () {
    canvas = document.getElementById('canvas');
  context = canvas.getContext('2d');
  $("#canvas").attr("width",$(window).width());
  $("#canvas").attr("height",$(window).height());
  init();

});



function init () {
  window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
          window.setTimeout(callback, 1000 / 60);
        };
      })();
      animate();
}
var directions = {
    'UP' : 1,
    'FLAT' : 0
}

function animate() {

  // update
  if(timer == 0)
  {
      if (lines.length == 0) {
        createLine(directions.UP,null,50);
      }else
      {
        if(lines.length < maxLines)
        {
            //If the previous line is in the "FLAT" direction, create 2 lines UP
            if (lines[lines.length-1].direction == directions.FLAT) {
                var p = lines[lines.length-1];
                p.endingPoint.x = lines[lines.length-1].origin.x;
                createLine(directions.UP,p,10);
                createLine(directions.UP,lines[lines.length-2],15); 
            }

            if (lines[lines.length-1].direction == directions.UP) {
                createLine(directions.FLAT,lines[lines.length-1],100);
            }
        }else
        {

        }
      }
      timer = baseLifeTime;
    }
  // clear
  context.clearRect(0, 0, canvas.width, canvas.height);
  // draw stuff
  for(var l in lines){

    var line = lines[l];
    drawLine(context,line);
  }
  // request new frame
  requestAnimFrame(function() {
    animate();
    timer--;
  });
}

function drawLine (context,line) {
  context.beginPath();
  context.moveTo(line.origin.x, line.origin.y);
    if(line.direction == directions.UP)
    {
        if(line.lifeTime > 0)
        {
            context.lineTo(line.endingPoint.x, line.endingPoint.y+line.lifeTime);
        }
        else
        {
            context.lineTo(line.endingPoint.x, line.endingPoint.y);
        }
    }
    if(line.direction == directions.FLAT)
    {
        if(line.lifeTime > 0)
        {
            context.lineTo(line.endingPoint.x-line.lifeTime, line.endingPoint.y);
        }
        else
        {
            context.lineTo(line.endingPoint.x, line.endingPoint.y);
        }
    }


    //context.globalAlpha = line.lifeTime/baseLifeTime;

    line.lifeTime--;

    context.strokeStyle = '#eee';
    context.stroke();
        //else
    //{
      //lines.splice(l,1);
    //}
}

function createLine (direction,ancestor,taille) {
    //TODO if !ancestor, we create the first "branch" of our tree
    var origin;
    if(ancestor == null)
    {
        origin = {
            'x':($(window).width()/2),
            'y':($(window).height())
        };

        endingPoint = {
            'x':origin.x,
            'y':(origin.y-taille)
        };
        ancestor = null;
    }else
    {
        if (direction == directions.UP){
            origin = ancestor.endingPoint;

            endingPoint = {
                'x':origin.x,
                'y':(origin.y-taille)
            };
        }

        if (direction == directions.FLAT)
        {
            origin = {
                'x':(ancestor.endingPoint.x-(taille/2)),
                'y':ancestor.endingPoint.y
            };

            endingPoint = {
                'x':(origin.x+taille),
                'y':(origin.y)
            };

        }
    }

    //We add the line to the "lines" array;
    lines.push(new Line(origin,direction,taille, ancestor,endingPoint));
}

http://pastebin.com/Xxq99vuC とそれを含む codepen : http://codepen.io/anon/pen/facmg

ご覧のとおり、最初の線は適切に作成されていますが、「ライフタイム」プロパティが 0 になった後、「フラット」線が描画されたままにならない理由がわかりません。

それで、誰かが私を助けることができるかどうか疑問に思いました。

どうもありがとう。乾杯。

4

2 に答える 2

1

問題はここにあります

if (lines[lines.length-1].direction == directions.FLAT) {
    var p = lines[lines.length-1];
    p.endingPoint.x = lines[lines.length-1].origin.x;

で何を達成しようとしているのかp.endingPoint.x = lines[lines.length-1].origin.xはわかりませんが、以前に作成した「フラット」ラインのendingPointをその原点と同じに設定しているため、見えなくなります。

それを削除すると、すべての行が表示されたままになりますが、正確にどのように表示するつもりだったのかはわかりません。

一般に、javascript では、lineObject のコピーではなく、lineObject へのvar p = lineObject新しい参照が作成されることに注意してください。に加えた変更は にも加えられます。行が「祖先」にリンクする方法が問題を引き起こしているように見えるため、プログラムの設計全体を再考する必要があるかもしれません。pline

于 2013-08-04T10:56:41.747 に答える