[英]Show drawing process using JavaScript and HTML5 canvas
我目前正在尝试使用JavaScript / JQuery和HTML5画布制作一些毕达哥拉斯树应用程序。
该算法工作正常,但可惜我看不到绘图过程。 UI只会冻结,并在完成后显示整个图形。
当前行为: http : //www.kappelcation.com/index.php?contentid=4这是我想要的行为: http : //www.jjam.de/Java/Applets/Fraktale/Pythagoras_Baum.html (您需要允许Java小程序,然后单击几次以查看绘制进度)。
$(document).ready(function(){ //just some listeners and initialization
initCanvas();
$(autOrManSelect).change(function(){
if(($(this).val()==1)) //changed from manual to automatic
{
$(pythagorasCanvas).click();
}
});
$(startButton).click(function(event){
$(this).unbind(event);
$(this).html('Add Leaves');
$(restartButton).css("visibility", "visible");
startTree();
$(this).click(function(){
var next = parseInt($(depthInput).val())+1;
$(depthInput).val(next);
$(pythagorasCanvas).click();
});
});
$(restartButton).click(function(){
startTree();
});
});
function initCanvas() //adjust size, clear the canvas and draw a boarder
{
var canvas = document.getElementById("pythagorasCanvas");
canvas.height=600;
canvas.width=$(mainDiv).width()-40;
$(pythagorasCanvas).unbind("click");
if (canvas.getContext)
{
var context = canvas.getContext("2d");
//clear canvas
drawRectangle(context, new Point(0,canvas.height), new Point(canvas.width,canvas.height), new Point(canvas.width,0), new Point(0,0), "#FFFFFF");
//draw border for canvas
drawRectangle(context,new Point(0,canvas.height),new Point(canvas.width,canvas.height), new Point(canvas.width, 0),new Point(0,0), '#000000', true);
}
}
function startTree() //start drawing process
{
initCanvas();
var canvas = document.getElementById("pythagorasCanvas");
if (canvas.getContext)
{
var context = canvas.getContext("2d");
var rectLength = parseInt($(firstSquareInput).val());
var startWidth = canvas.width/2-rectLength/2;
var startHeight = canvas.height-canvas.height/4;
var startA = new Point(startWidth, startHeight);
var startB = new Point(startWidth+rectLength, startHeight);
drawBranch(context, startA, startB, 0);
}
}
function Point(x, y) {
this.x = x;
this.y = y;
}
function drawBranch(context, a, b, depth) //gets called recursively
{
var maxDepth = $(depthInput).val();
if(depth<maxDepth)
{
depth++;
//calculate positions of current rectangle
var dx = b.x - a.x;
var dy = a.y - b.y;
var c = new Point(b.x-dy, b.y-dx);
var d = new Point(a.x-dy, a.y-dx);
//draw current rectangle
drawRectangle(context, a, b, c, d);
//calculate new position
var offSetX;
if($(triangleOffsetInput).val().toLowerCase()=="random")
{
offSetX = Math.random();
}
else
{
offSetX = parseFloat($(triangleOffsetInput).val())/100; //first offset in x-direction (in relation to a square length of 1)
}
var offSetY = -Math.sqrt(Math.pow(0.5,2)-Math.pow((0.5-offSetX),2)); //Pythagoras to get the offset in y (negative sign necessary because the y-values get smaller upwards)
var e = new Point( d.x + offSetX*(c.x-d.x) + offSetY*(a.y-b.y), d.y + offSetX*(c.y-d.y) + offSetY*(b.x-a.x));
if($(fillTriangleBox).prop("checked"))
{
drawTriangle(context, c, d, e);
}
var autOrMan = $(autOrManSelect).val();
if(autOrMan==1)
{
//draw new positions
drawBranch(context, d, e, depth);
drawBranch(context, e ,c, depth);
}
else
{
$(pythagorasCanvas).click(function(event)
{
$(this).unbind(event);
drawBranch(context, d, e, depth);
drawBranch(context, e ,c, depth);
});
}
}
else
{
$(pythagorasCanvas).click(function(event)
{
$(this).unbind(event);
drawBranch(context, a, b, depth);
});
}
}
function drawTriangle(context, c, d, e, color)
{
if(typeof(color)==='undefined')
{
color='#'+$(triangleColorInput).val();
}
context.strokeStyle = color;
context.beginPath();
context.moveTo(c.x, c.y);
context.lineTo(d.x, d.y);
context.lineTo(e.x, e.y);
context.closePath();
context.fillStyle = color;
context.fill();
context.stroke();
}
function drawRectangle(context, a, b, c, d, color, ignoreFill)
{
if(typeof(color)==='undefined')
{
color='#'+$(rectColorInput).val();
}
if(typeof(ignoreFill)==='undefined')
{
ignoreFill=false;
}
context.strokeStyle = color;
context.beginPath();
context.moveTo(a.x, a.y);
context.lineTo(b.x, b.y)
context.lineTo(c.x, c.y);
context.lineTo(d.x, d.y);
context.closePath();
if($(fillRectBox).prop("checked") && !ignoreFill)
{
context.fillStyle = color;
context.fill();
}
context.stroke();
}
我试图使用setTimeout()函数使绘图过程异步以实现所需的行为,但是我在实现它时失败了,或者setTimeout()在这种情况下无济于事。
希望您能给我提示。 提前致谢!
我认为使用setTimeout对drawBranch函数进行以下(未经测试的)修改应该可以
if(autOrMan==1)
{
//draw new positions
setTimeout(function() {
drawBranch(context, d, e, depth);
drawBranch(context, e ,c, depth);
}, 0);
}
else
{
$(pythagorasCanvas).click(function(event)
{
$(this).unbind(event);
drawBranch(context, d, e, depth);
drawBranch(context, e ,c, depth);
});
}
因为JavaScript是单线程的 ,所以冻结了。 无需递归调用drawBranch
,而是通过setTimeout
递归调度它,然后放弃该函数。 这将使浏览器有时间重画画布。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.