updated 带圆角的地图实现

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

181
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;
var y_length = this.data.length;
for(var i=0; i<x_length; i++){
for(var j=0; j<y_length; j++){
context.lineWidth = 2;
context.strokeStyle="#09c";
if(this.get(j,i)){
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(j){
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(i<x_length-1){
code += 100;
}
}
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){
code += 10;
}
}
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){
code += 1;
}
}
if(code){
switch(code){
case 1100:
context.beginPath(); context.beginPath();
context.moveTo(15,15); context.arc(x+this.size/2,y-this.size/2,this.size/2,.5*Math.PI,1*Math.PI,false);
context.lineTo(15,15-this.size/2);
context.stroke(); context.stroke();
context.closePath(); context.closePath();
break;
case 110:
context.beginPath(); context.beginPath();
context.moveTo(15,15); context.arc(x+this.size/2,y+this.size/2,this.size/2,Math.PI,1.5*Math.PI,false);
context.lineTo(15,15+this.size/2);
context.stroke(); context.stroke();
context.closePath(); context.closePath();
// var x_length = this.data[0].length; break;
// var y_length = this.data.length; case 11:
// for(var i=0; i<x_length; i++){ context.beginPath();
// for(var j=0; j<y_length; j++){ context.arc(x-this.size/2,y+this.size/2,this.size/2,1.5*Math.PI,2*Math.PI,false);
// context.lineWidth = 2; context.stroke();
// context.strokeStyle="#09c"; context.closePath();
// if(this.get(j,i)){ break;
// var x = this.x+i*this.size; case 1001:
// var y = this.y+j*this.size; context.beginPath();
// var code = 0; context.arc(x-this.size/2,y-this.size/2,this.size/2,0,.5*Math.PI,false);
// 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))){ context.stroke();
// if(j){ context.closePath();
// code += 1000; break;
// } default:
// } if(Math.floor(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))){ context.beginPath();
// if(i<x_length-1){ context.moveTo(x,y);
// code += 100; context.lineTo(x,y-this.size/2);
// } context.stroke();
// } 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))){ }
// if(j<y_length-1){ code %= 1000;
// code += 10; if(Math.floor(code/100)){
// } context.beginPath();
// } context.moveTo(x,y);
// 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.lineTo(x+this.size/2,y);
// if(i){ context.stroke();
// code += 1; context.closePath();
// } }
// } code %= 100;
// if(code){ if(Math.floor(code/10)){
// context.beginPath(); context.beginPath();
// switch(code){ context.moveTo(x,y);
// case 1100: context.lineTo(x,y+this.size/2);
// context.arc(x+this.size,y-this.size,this.size/2,.5*Math.PI,1*Math.PI,false); context.stroke();
// context.stroke(); context.closePath();
// context.closePath(); }
// break; code %= 10;
// case 110: if(Math.floor(code/1)){
// context.arc(x+this.size,y+this.size,this.size/2,Math.PI,1.5*Math.PI,false); context.beginPath();
// context.stroke(); context.moveTo(x,y);
// context.closePath(); context.lineTo(x-this.size/2,y);
// 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); }
// context.stroke(); }
// context.closePath(); }
// break; }
// case 1001: }
// context.arc(x-this.size,y-this.size,this.size/2,0,.5*Math.PI,false); }
// context.stroke();
// context.closePath();
// break;
// default:
// if(code/1000){
// context.moveTo(x,y);
// context.lineTo(x,y-this.size);
// context.stroke();
// context.closePath();
// context.beginPath();
// }
// code %= 1000;
// if(code/100){
// context.moveTo(x,y);
// context.lineTo(x+this.size,y);
// context.stroke();
// context.closePath();
// context.beginPath();
// }
// code %= 100;
// if(code/10){
// context.moveTo(x,y);
// context.lineTo(x,y+this.size);
// context.stroke();
// context.closePath();
// context.beginPath();
// }
// code %= 10;
// if(code/1){
// context.moveTo(x,y);
// context.lineTo(x-this.size,y);
// context.stroke();
// }
// context.closePath();
// }
// }
// }
// }
// }
} }
}); });
})(); })();