updated 带圆角的地图实现

This commit is contained in:
郑浩乐 2016-01-04 09:09:21 +08:00
parent bd030944c1
commit ec4b24aa31

193
index.js
View File

@ -112,106 +112,99 @@
y:15, y:15,
data:map_data, data:map_data,
draw:function(context){ draw:function(context){
context.strokeStyle='#f00'; var x_length = this.data[0].length;
context.beginPath(); var y_length = this.data.length;
context.moveTo(15,15); for(var i=0; i<x_length; i++){
context.lineTo(15,15-this.size/2); for(var j=0; j<y_length; j++){
context.stroke(); context.lineWidth = 2;
context.closePath(); context.strokeStyle="#09c";
context.beginPath(); if(this.get(j,i)){
context.moveTo(15,15); var x = this.x+i*this.size;
context.lineTo(15,15+this.size/2); var y = this.y+j*this.size;
context.stroke(); var code = 0;
context.closePath(); if(this.get(j-1,i)&&!(this.get(j-1,i-1)&&this.get(j-1,i+1)&&this.get(j,i-1)&&this.get(j,i+1))){
// var x_length = this.data[0].length; if(j){
// var y_length = this.data.length; code += 1000;
// for(var i=0; i<x_length; i++){ }
// for(var j=0; j<y_length; j++){ }
// context.lineWidth = 2; if(this.get(j,i+1)&&!(this.get(j-1,i+1)&&this.get(j+1,i+1)&&this.get(j-1,i)&&this.get(j+1,i))){
// context.strokeStyle="#09c"; if(i<x_length-1){
// if(this.get(j,i)){ code += 100;
// var x = this.x+i*this.size; }
// var y = this.y+j*this.size; }
// var code = 0; if(this.get(j+1,i)&&!(this.get(j+1,i-1)&&this.get(j+1,i+1)&&this.get(j,i-1)&&this.get(j,i+1))){
// if(this.get(j-1,i)&&!(this.get(j-1,i-1)&&this.get(j-1,i+1)&&this.get(j,i-1)&&this.get(j,i+1))){ if(j<y_length-1){
// if(j){ code += 10;
// code += 1000; }
// } }
// } if(this.get(j,i-1)&&!(this.get(j-1,i-1)&&this.get(j+1,i-1)&&this.get(j-1,i)&&this.get(j+1,i))){
// if(this.get(j,i+1)&&!(this.get(j-1,i+1)&&this.get(j+1,i+1)&&this.get(j-1,i)&&this.get(j+1,i))){ if(i){
// if(i<x_length-1){ code += 1;
// code += 100; }
// } }
// } if(code){
// if(this.get(j+1,i)&&!(this.get(j+1,i-1)&&this.get(j+1,i+1)&&this.get(j,i-1)&&this.get(j,i+1))){ switch(code){
// if(j<y_length-1){ case 1100:
// code += 10; context.beginPath();
// } context.arc(x+this.size/2,y-this.size/2,this.size/2,.5*Math.PI,1*Math.PI,false);
// } context.stroke();
// if(this.get(j,i-1)&&!(this.get(j-1,i-1)&&this.get(j+1,i-1)&&this.get(j-1,i)&&this.get(j+1,i))){ context.closePath();
// if(i){ break;
// code += 1; case 110:
// } context.beginPath();
// } context.arc(x+this.size/2,y+this.size/2,this.size/2,Math.PI,1.5*Math.PI,false);
// if(code){ context.stroke();
// context.beginPath(); context.closePath();
// switch(code){ break;
// case 1100: case 11:
// context.arc(x+this.size,y-this.size,this.size/2,.5*Math.PI,1*Math.PI,false); context.beginPath();
// context.stroke(); context.arc(x-this.size/2,y+this.size/2,this.size/2,1.5*Math.PI,2*Math.PI,false);
// context.closePath(); context.stroke();
// break; context.closePath();
// case 110: break;
// context.arc(x+this.size,y+this.size,this.size/2,Math.PI,1.5*Math.PI,false); case 1001:
// context.stroke(); context.beginPath();
// context.closePath(); context.arc(x-this.size/2,y-this.size/2,this.size/2,0,.5*Math.PI,false);
// break; context.stroke();
// case 11: context.closePath();
// context.arc(x-this.size,y+this.size,this.size/2,1.5*Math.PI,2*Math.PI,false); break;
// context.stroke(); default:
// context.closePath(); if(Math.floor(code/1000)){
// break; context.beginPath();
// case 1001: context.moveTo(x,y);
// context.arc(x-this.size,y-this.size,this.size/2,0,.5*Math.PI,false); context.lineTo(x,y-this.size/2);
// context.stroke(); context.stroke();
// context.closePath(); context.closePath();
// break; }
// default: code %= 1000;
// if(code/1000){ if(Math.floor(code/100)){
// context.moveTo(x,y); context.beginPath();
// context.lineTo(x,y-this.size); context.moveTo(x,y);
// context.stroke(); context.lineTo(x+this.size/2,y);
// context.closePath(); context.stroke();
// context.beginPath(); context.closePath();
// } }
// code %= 1000; code %= 100;
// if(code/100){ if(Math.floor(code/10)){
// context.moveTo(x,y); context.beginPath();
// context.lineTo(x+this.size,y); context.moveTo(x,y);
// context.stroke(); context.lineTo(x,y+this.size/2);
// context.closePath(); context.stroke();
// context.beginPath(); context.closePath();
// } }
// code %= 100; code %= 10;
// if(code/10){ if(Math.floor(code/1)){
// context.moveTo(x,y); context.beginPath();
// context.lineTo(x,y+this.size); context.moveTo(x,y);
// context.stroke(); context.lineTo(x-this.size/2,y);
// context.closePath(); context.stroke();
// context.beginPath(); context.closePath();
// } }
// code %= 10; }
// if(code/1){ }
// context.moveTo(x,y); }
// context.lineTo(x-this.size,y); }
// context.stroke(); }
// }
// context.closePath();
// }
// }
// }
// }
// }
} }
}); });
})(); })();