diff -r c21cffd36f98 -r 84719280c84d integ/js/vs/_vs.draw.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/integ/js/vs/_vs.draw.js Fri Apr 12 15:08:00 2013 +0200 @@ -0,0 +1,236 @@ +(function ($) { + +$.fn._vs.draw = { + + settings:{ + draw:{ + trail:1, + showLayout:false + } + }, + + update:function(_this){ + /* refresh rate of canvas (show trail) */ + //console.log(_this.ctx) + if(this.settings.draw.trail==1) { + _this.ctx.clearRect(0, 0, _this.ctx.canvas.clientWidth, _this.ctx.canvas.clientHeight); + }else{ + debugDrawChart(0, + 0, + ctx.canvas.clientWidth, + ctx.canvas.clientHeight, + "rgba(255,255,255,"+this.settings.draw.trail+")", + ctx); + } + + /* Draw body(s) from box2d */ + for( var b = _this.world.GetBodyList() ; b ; b = b.GetNext()) { + for (var s = b.GetFixtureList(); s != null; s = s.GetNext()) { + this.drawShape(_this,s); + } + } + + /* Show wireframe mode */ + if(this.settings.draw.showLayout==true){ + this.debugDrawChart(chart.position.x, + chart.position.y, + chart.position.width, + chart.position.height, + "rgba(255,0,0,0.2)", + ctx); + } + }, + debugDrawChart :function (x,y,w,h,color,ctx) { + ctx.save(); + ctx.translate(0,0); + ctx.fillStyle = color; + ctx.beginPath(); + ctx.rect(x,y,w,h); + ctx.closePath(); + ctx.strokeStyle ="#000" + ctx.lineWidth = 0.5; + ctx.stroke(); + ctx.restore(); + }, + clippedBackgroundImage:function( ctx, img,x,y ){ + ctx.save(); + ctx.clip(); + //console.log(img) + ctx.drawImage(img, + x-(img.height/2), + y-(img.width/2), + img.width, + img.height); + ctx.restore(); + }, + haveTexture:function(s){ + var result = false + if(typeof(s.m_userData.texture)!="undefined"){ + if(typeof(s.m_userData.texture.img)!="undefined"){ + if(s.m_userData.texture.img.complete){ + result = true + } + } + } + return result + }, + + drawShape: function (_this,s) { + var b = s.GetBody(); + var position = b.GetPosition(); + var angle = b.GetAngle(); + var radiusCoef = 9; + var radiusCoefMax=10 + var scale = _this.settings.options.scale + + // add x and y to userData + s.m_userData.x = b.GetWorldCenter().x*scale + s.m_userData.y = b.GetWorldCenter().y*scale + + // + // Call back draw + if(typeof(s.m_userData.callback)!="undefined"){ + if(typeof(s.m_userData.callback.draw)=="function"){ + var t = _this.select('ID',s.m_userData.ID) + s.m_userData.callback.draw(t) + } + } + + switch (s.GetType()){ + case 0: // round + + switch (s.m_userData){ + case null: + _this.ctx.fillStyle = "rgba(255,0,0,1)"; + break; + default: + _this.ctx.fillStyle = s.m_userData.fillStyle; + break + } + + var radius = s.m_shape.m_radius + + // round token + if(_this.settings.sedimentation.token.visible==true){ + + _this.ctx.save(); + _this.ctx.translate(position.x*scale, position.y*scale); + _this.ctx.rotate(angle); + _this.ctx.beginPath(); + var h = (radius/radiusCoefMax*radiusCoef)*scale + + //console.log(s.m_userData.strokeStyle) + if(typeof(s.m_userData.strokeStyle)!="undefined"){ + _this.ctx.strokeStyle = s.m_userData.strokeStyle + } else{ + _this.ctx.strokeStyle = "rgba(0,0,0,0)" + } + + if(typeof(s.m_userData.lineWidth)!="undefined"){ + _this.ctx.lineWidth = s.m_userData.lineWidth + } else { + _this.ctx.lineWidth = 0 + } + + _this.ctx.arc(0, 0,h, 0, Math.PI*2, true); + + if(this.haveTexture(s)){ + this.clippedBackgroundImage(_this.ctx,s.m_userData.texture.img + ,0 + ,0); + } + _this.ctx.closePath(); + + if(_this.settings.options.layout==true){ + _this.ctx.strokeStyle = "#000" + _this.ctx.lineWidth = 0.5 + _this.ctx.stroke(); + }else{ + if(!this.haveTexture(s))_this.ctx.fill(); + _this.ctx.stroke(); + + } + + _this.ctx.restore(); + + } + + + break + case 1: // vertice (polygon and squares ...) + + //if(s.m_userData.type != "wall" && s.m_userData.type != "lift")console.log("draw",s.m_userData) + + switch (s.m_userData){ + case null: + _this.ctx.fillStyle = "rgba(255,0,0,1)"; + break; + default: + _this.ctx.fillStyle = s.m_userData.fillStyle; + break + } + + var width = s.m_shape.m_vertices[0].x*scale + var height = s.m_shape.m_vertices[0].y*scale + var posx = position.x*scale-s.m_shape.m_vertices[0].x*scale + var posy = position.y*scale-s.m_shape.m_vertices[0].y*scale + + _this.ctx.save(); + _this.ctx.translate(position.x*scale, position.y*scale); + _this.ctx.rotate(angle); + _this.ctx.beginPath(); + + //if(s.m_userData.ID==1 ){ console.log(s.m_userData.lineWidth) } + //if(typeof(s.m_userData.fillStyle)!="undefined") _this.ctx.fillStyle = s.m_userData.fillStyle + if(typeof(s.m_userData.strokeStyle)!="undefined"){ _this.ctx.strokeStyle = s.m_userData.strokeStyle + } else{ _this.ctx.strokeStyle = s.m_userData.fillStyle} + + if(typeof(s.m_userData.lineWidth)!="undefined"){ _this.ctx.lineWidth = s.m_userData.lineWidth + } else{ _this.ctx.lineWidth = 0} + + + for (var i = 0; i < s.m_shape.m_vertices.length; i++) { + var points = s.m_shape.m_vertices; + //var this = {x:0,y:0} + _this.ctx.moveTo(( points[0].x) * scale, (points[0].y) * scale); + for (var j = 1; j < points.length; j++) { + _this.ctx.lineTo((points[j].x ) * scale, (points[j].y ) * scale); + } + _this.ctx.lineTo(( points[0].x) * scale, ( points[0].y) * scale); + } + _this.ctx.closePath(); + _this.ctx.fill(); + + // pour le debug mode + if(_this.settings.options.layout==true){ + _this.ctx.lineWidth = 0.1; + _this.ctx.strokeStyle ="rgb(0,0,0)" + _this.ctx.stroke(); + + // incomming points Drawer + //for (var i = _this.settings.sedimentation.incoming.point.length - 1; i >= 0; i--) { + // + //_this.settings.sedimentation.incoming.point[i].y + // draw green + //_this.ctx.font = '40px Arial'; + //_this.ctx.fillText("x", _this.settings.sedimentation.incoming.point[i].x, _this.settings.sedimentation.incoming.point[i].y); + //_this.ctx.fillStyle = "rgb(0,250,0,0.5)"; + + //}; + + }else{ + _this.ctx.stroke(); + } + _this.ctx.restore(); + + break; + case 2: + + break; + _this.ctx.fillStyle = "rgb(0,0,0)"; + } + + } +} + +})(jQuery);