我花了大约12个小时查看这段代码,并摆弄它,试图找出有递归问题的地方,因为我得到了"超出最大调用堆栈大小"错误,并且没有找到它.比我聪明的人请帮助我!
到目前为止,我发现的只是当我创建对象时spot
,一个circle
对象,问题就消失了,但是当我把它变成'pip'时,我得到了这个堆栈溢出错误.我用一个friggin'显微镜看了一下pip类,但仍然不知道为什么会发生这种情况!
var canvas = document.getElementById('myCanvas'); //------------------------------------------------------------------------------------- // Classes //------------------------------------------------------------------------------------- //===================================================================================== //CLASS - point function point(x,y){ this.x = x; this.y = y; } //===================================================================================== // CLASS - drawableItem function drawableItem() { var size = 0; this.center = new point(0,0); this.lineWidth = 1; this.dependentDrawableItems = new Array(); } //returns the size drawableItem.prototype.getSize = function getSize(){ return this.size; } // changes the size of this item and the relative size of all dependents drawableItem.prototype.changeSize = function(newSize){ var relativeItemSizes = new Array; relativeItemSizes.length = this.dependentDrawableItems.length; // get the relative size of all dependent items for (var i = 0; i < this.dependentDrawableItems.length; i++){ relativeItemSizes[i] = this.dependentDrawableItems[i].getSize() / this.size; } // change the size this.size = newSize; // apply the ratio of change back to all dependent items for (var i = 0; i < relativeItemSizes.length; i++){ this.dependentDrawableItems[i].changeSize(relativeItemSizes[i] * newSize); } } //moves all the vertices and every dependent to an absolute point based on center drawableItem.prototype.moveTo = function(moveX,moveY){ //record relative coordinates var relativeItems = new Array; relativeItems.length = this.dependentDrawableItems.length; for (var i = 0; i < relativeItems.length; i++){ relativeItems[i] = new point; relativeItems[i].x = this.dependentDrawableItems[i].center.x - this.center.x; relativeItems[i].y = this.dependentDrawableItems[i].center.y - this.center.y; } //move the center this.center.x = moveX; this.center.y = moveY; //move all the items relative to the center for (var i = 0; i < relativeItems.length; i++){ this.dependentDrawableItems[i].moveItemTo(this.center.x + relativeItems[i].x, this.center.y + relativeItems[i].y); } } // draws every object in dependentDrawableItems drawableItem.prototype.draw = function(ctx){ for (var i = 0; i < this.dependentDrawableItems.length; i++) { this.dependentDrawableItems[i].draw(ctx); } } //===================================================================================== //CLASS - circle function circle(isFilledCircle){ drawableItem.call(this); this.isFilled = isFilledCircle } circle.prototype = new drawableItem(); circle.prototype.parent = drawableItem.prototype; circle.prototype.constructor = circle; circle.prototype.draw = function(ctx){ ctx.moveTo(this.center.x,this.center.y); ctx.beginPath(); ctx.arc(this.center.x, this.center.y, this.size, 0, 2*Math.PI); ctx.closePath(); ctx.lineWidth = this.lineWidth; ctx.strokeStyle = this.outlineColor; if (this.isFilled === true){ ctx.fill(); }else { ctx.stroke(); } this.parent.draw.call(this,ctx); } //===================================================================================== //CLASS - pip function pip(size){ circle.call(this,true); } pip.prototype = new circle(false); pip.prototype.parent = circle.prototype; pip.prototype.constructor = pip; //---------------------------------------------------------------------- // Objects/variables - top layer is last (except drawable area is first) //---------------------------------------------------------------------- var drawableArea = new drawableItem(); var spot = new pip(); spot.changeSize(20); drawableArea.dependentDrawableItems[drawableArea.dependentDrawableItems.length] = spot; //------------------------------------------ // Draw loop //------------------------------------------ function drawScreen() { var context = canvas.getContext('2d'); context.canvas.width = window.innerWidth; context.canvas.height = window.innerHeight; spot.moveTo(context.canvas.width/2, context.canvas.height/2); drawableArea.draw(context); } window.addEventListener('resize', drawScreen);
这是演示:http://jsfiddle.net/DSU8w/