front_end/libs/Renderer/Canvas.js

//ClASS:渲染器类型
function Canvas(layer) {
	this.layer = layer;
	this.canvas = document.getElementById("dynamiccanvas2d");
	this.context = this.canvas.getContext("2d");

	// 背景层canvas 栅栏格子
	this.backgroundcanvas = document.getElementById("backgroundcanvas2d");
	this.backgroundcontext = this.backgroundcanvas.getContext("2d");

	// 选择层canvas
	this.selectcanvas = document.getElementById("selectcanvas2d");
	this.selectcontext = this.selectcanvas.getContext("2d");

	this.reset = "reset";

	//只有当lock为false的时候才会执行绘制。
	this.lock = true;

	this.setSize(this.layer.size);
	this.geometrys = {};
	//grid
	this.gridGeometrys;
	//单位：米
	this.meter;
	this.interval = 10 * this.layer.res;
	this.layer.div.appendChild(this.canvas);
};


//设置canvas元素的大小。
Canvas.prototype.setSize = function (size) {
	this.canvas.width = size.w;
	this.canvas.height = size.h;
	this.canvas.style.width = size.w + "px";
	this.canvas.style.height = size.h + "px";

	this.backgroundcanvas.width = size.w;
	this.backgroundcanvas.height = size.h;
	this.backgroundcanvas.style.width = size.w + "px";
	this.backgroundcanvas.style.height = size.h + "px";

	this.selectcanvas.width = size.w;
	this.selectcanvas.height = size.h;
	this.selectcanvas.style.width = size.w + "px";
	this.selectcanvas.style.height = size.h + "px";

};

// 绘制放大缩小层canvas
Canvas.prototype.drawBackGround = function () {
	this.backgroundcontext.clearRect(0, 0, this.layer.size.w, this.layer.size.h);
	this.addGrid();
	this.addMeter();
};

// 绘画格子
Canvas.prototype.addGrid = function () {
	var leftdown = {
		x: 0,
		y: height
	};
	var rightup = {
		x: width,
		y: 0
	};
	leftdown = this.layer.getPositionFromPx(leftdown);
	rightup = this.layer.getPositionFromPx(rightup);

	console.log(leftdown, rightup)
	var Maxh = height;
	var Maxw = width;
	var Minw = 0;
	var Minh = 0;

	if (leftdown.y < -backgroundcanvasMax / 2) {
		leftdown.y = -backgroundcanvasMax / 2;
		var t = this.getLocalXY(leftdown);
		Maxh = t.y;
	}
	if (leftdown.x < -backgroundcanvasMax / 2) {
		leftdown.x = -backgroundcanvasMax / 2;
		var t = this.getLocalXY(leftdown);
		Minw = t.x;
	}
	if (rightup.x > backgroundcanvasMax / 2) {
		rightup.x = backgroundcanvasMax / 2;
		var t = this.getLocalXY(rightup);
		Maxw = t.x;
	}
	if (rightup.y > backgroundcanvasMax / 2) {
		rightup.y = backgroundcanvasMax / 2;
	}

	var downcount = Math.floor(leftdown.y / stepy);
	var leftcount = Math.floor(leftdown.x / stepx);
	var upcount = Math.floor(rightup.y / stepy);
	var rightcount = Math.floor(rightup.x / stepx);

	var context = this.backgroundcontext;
	context.save();

	var startPoint = {
		x: leftcount * stepx,
		y: downcount * stepy
	};
	var endPoint = {
		x: rightcount * stepx,
		y: upcount * stepy
	};
	context.shadowColor = undefined;
	context.beginPath();

	startPoint = this.getLocalXY(startPoint);
	endPoint = this.getLocalXY(endPoint);

	var count = 0;
	for (var i = leftcount; i <= rightcount; ++i) {
		context.moveTo(startPoint.x + this.getInt(count * stepx / this.layer.res), 0);
		context.lineTo(startPoint.x + this.getInt(count * stepx / this.layer.res), Maxh);
		++count;
	}

	count = 0;
	for (var i = downcount; i <= upcount; ++i) {
		context.moveTo(Minw, this.getInt(startPoint.y - count * stepy / this.layer.res));
		context.lineTo(Maxw, this.getInt(startPoint.y - count * stepy / this.layer.res));
		++count;
	}

	for (var key in gridStyle) {
		context[key] = gridStyle[key];
	}

	context.stroke();
	context.restore();
};


Canvas.prototype.addMeter = function () {
	var context = this.backgroundcontext;
	context.save();
	context.globalAlpha = 1;
	context.beginPath();
	var pt1 = {
		x: meterpositionX,
		y: height - meterpositionX
	};
	var pt2 = {
		x: meterpositionX,
		y: height - meterpositionX + 5
	};
	var pt3 = {
		x: meterpositionX + meter / this.layer.res,
		y: height - meterpositionX + 5
	};
	var pt4 = {
		x: meterpositionX + meter / this.layer.res,
		y: height - meterpositionX
	};

	context.moveTo(pt1.x, pt1.y);
	context.lineTo(pt2.x, pt2.y);
	context.lineTo(pt3.x, pt3.y);
	context.lineTo(pt4.x, pt4.y);

	context.stroke();

	context.font = textStyle.font;
	context.fillStyle = textStyle.fillStyle;
	context.globalAlpha = textStyle.globalAlpha;
	context.fillText("1m", pt1.x + meter / (2 * this.layer.res) - 6, pt1.y + 20);
	context.restore();
};

//这个方法用于收集所有需要绘制的矢量元素。    
Canvas.prototype.drawGeometry = function (geometry, style, contextindex) {
	console.log(arguments)
	this.geometrys[geometry.id] = [geometry, style];
	//如果渲染器没有被锁定则可以进行重绘。
	if (!this.lock) {
		this.redraw(contextindex);
	}
};

//只画当前的元素，别的不画
Canvas.prototype.drawSingleGeometry = function (geometry, style) {
	this.geometrys[geometry.id] = [geometry, style];
	this.draw(geometry, style, geometry.contextIndex);
};

Canvas.prototype.clearCanvas = function (contextIndex) {
	if (contextIndex == this.layer.parameter.contextIndex) {
		this.context.clearRect(0, 0, width, height);
	} else if (contextIndex == this.layer.parameter.backgroundcontext) {
		this.backgroundcontext.clearRect(0, 0, width, height);
	} else if (contextIndex == this.layer.parameter.selectcontext) {
		this.selectcontext.clearRect(0, 0, width, height);
	}
};

/*
	this.refreshCanvas=false;
	this.refreshBackgroundCanvas=false;
	this.refreshSelectCanvas=false;
*/
Canvas.prototype.autoRedraw = function () {
	++TESTREFRESH;
	if (this.layer.control.refreshCanvas) {
		this.redraw(0);
		//console.log("刷新:"+TESTREFRESH);
		this.layer.control.refreshCanvas = false;
	}
	if (this.layer.control.refreshBackgroundCanvas) {
		this.redraw(1);
		//console.log("刷新背景:"+TESTREFRESH);
		this.layer.control.refreshBackgroundCanvas = false;
	}
	if (this.layer.control.refreshSelectCanvas) {
		this.redraw(2);
		//console.log("刷新选择:"+TESTREFRESH);
		this.layer.control.refreshSelectCanvas = false;
	}
};

//每次绘制都是全部清除，全部重绘。
//todo加入快照后可以大大提高性能。    
Canvas.prototype.redraw = function (contextindex) {

	//this.context.clearRect(0, 0, this.layer.size.w, this.layer.size.h);
	var context = this.getContext(contextindex);
	context.clearRect(0, 0, width, height);
	this.setCanvasStyle("reset", contextindex);
	//0是正常，1是背景，2是选中
	if (contextindex == 1) {
		this.drawBackGround();
	} else {
		var geometry, style;

		if (!this.lock) {

			// 画墙
			for (var i = 0; i < this.layer.data2d.wallIds.length; ++i) {
				var geometryid = this.layer.vectors[this.layer.data2d.wallIds[i]].geometry.id;
				geometry = this.geometrys[geometryid][0];
				if (geometry.contextIndex == contextindex) {
					// 
					if (geometry.floor == this.layer.selectFloor) {
						style = this.geometrys[geometryid][1];
						this.draw(geometry, style, geometry.contextIndex);
					}
					//else if((geometry.floor == this.layer.selectFloor-1)||(this.layer.selectFloor==1&&geometry.floor==2))
					else if ((geometry.floor == this.layer.selectFloor - 1)) {
						style = this.geometrys[geometryid][1];
						this.draw(geometry, style, geometry.contextIndex, this.layer.parameter.downfloorstyle);
					}
				}
			}

			if (this.layer.data2d.temp_wallId != null) {
				var geometryid = this.layer.vectors[this.layer.data2d.temp_wallId].geometry.id;
				geometry = this.geometrys[geometryid][0];
				if (geometry.contextIndex == contextindex) {
					style = this.geometrys[geometryid][1];
					this.draw(geometry, style, geometry.contextIndex);
				}
			}

			for (var id in this.geometrys) {

				if (this.geometrys[id][0].geoType == "Wall") {
					continue;
				}

				if (this.geometrys.hasOwnProperty(id)) {
					geometry = this.geometrys[id][0];
					if ((geometry.symbolType == "door" || geometry.symbolType == "window") && geometry.floor != this.layer.selectFloor) {
						continue;
					}
					/*
	                if(geometry.geoType=="WinderStair")
					{
						style = this.geometrys[id][1];
	                    this.draw(geometry, style, geometry.contextIndex);
					}
					*/
					else if (geometry.contextIndex == contextindex) {
						style = this.geometrys[id][1];
						this.draw(geometry, style, geometry.contextIndex);
					}
				}
			}
		}
	}
};

//每一个矢量元素的绘制，这里我们在以后会添加更多的矢量图形。
Canvas.prototype.draw = function (geometry, style, contextIndex, floorstyle) {
	var strategy = {
		"Point": 'drawPoint',
		"Circle": 'drawCircle',
		"Line": 'drawLine',
		"Text": 'drawText',
		"Wall": 'drawWall',
		"OpenDoor": 'drawOpen',
		"OpenWindow": 'drawOpen',
		"SimpleDoor": 'drawSimpleDoor',
		"BiFoldDoor": 'drawBiFoldDoor',
		"SlidingDoor": 'drawSlidingDoor',
		"SingleCasement": 'drawSingleCasement',
		"DoubleCasement": 'drawDoubleCasement',
		"SlidingWindow": 'drawSlidingWindow',
		"WinderStair": 'drawWinderStair',
		"Spiral": 'drawSpiral',
		"Sector": 'drawSector',
		"Sector2": 'drawSector2',
		"LineMeasure": 'drawLineWithMeasure'
	}

	this[strategy[geometry.geoType]](geometry, style, contextIndex)
	//{todo} 我们在这里判断各种矢量要素的绘制。        
};

Canvas.prototype.getContext = function (contextIndex) {
	if (contextIndex == 0) {
		return this.context;
	} else if (contextIndex == 1) {
		return this.backgroundcontext;
	} else if (contextIndex == 2) {
		return this.selectcontext;
	} else {
		alert("Canvas:237");
		return null;
	}
};

//针对点的绘制方法。
Canvas.prototype.drawPoint = function (geometry, style, contextIndex) {

	this.setCanvasStyle(style, contextIndex);
	this.rendererPoint(geometry, contextIndex);
	this.setCanvasStyle(this.reset, contextIndex);
};

Canvas.prototype.rendererPoint = function (geometry, contextIndex) {
	var radius = geometry.radius;
	var twoPi = Math.PI * 2;
	var pt = this.getLocalXY(geometry);

	var context = this.getContext(contextIndex);

	context.beginPath();
	context.moveTo(pt.x, pt.y);
	context.arc(pt.x, pt.y, radius, 0, twoPi, true);
	context.closePath();
	context.fill();
};

//针对圆的绘制方法。
Canvas.prototype.drawCircle = function (geometry, style, contextIndex) {

	this.setCanvasStyle(style, contextIndex);
	this.rendererCircle(geometry, style, contextIndex);
	this.setCanvasStyle(this.reset, contextIndex);
};

Canvas.prototype.rendererCircle = function (geometry, rendererType, contextIndex) {
	var radius = geometry.radius;
	var twoPi = Math.PI * 2;
	var pt = this.getLocalXY(geometry);

	var context = this.getContext(contextIndex);

	context.beginPath();
	context.arc(pt.x, pt.y, radius, 0, twoPi, true);
	if (rendererType.f_fill) {
		context.fill();
	}
	if (rendererType.f_stroke) {
		context.stroke();
	}
};

Canvas.prototype.drawSector2 = function (geometry, style, contextIndex) {
	//this.setCanvasStyle(style,contextIndex);
	this.rendererSector2(geometry, style, contextIndex);
	this.setCanvasStyle(this.reset, contextIndex);
};

Canvas.prototype.rendererSector2 = function (geometry, style, contextIndex) {

	var points = geometry.points;
	var len = 2;
	var pt = [];
	for (var i = 0; i < points.length; ++i) {
		var temp = this.getLocalXY(points[i]);
		pt.push(temp);
	}

	this.setCanvasStyle(openStyle, contextIndex);
	var context = this.getContext(contextIndex);

	context.lineWidth = openStyle.lineWidth / this.layer.res;

	context.beginPath();
	var start = this.getLocalXY(points[0]);
	var x = start.x;
	var y = start.y;
	if (!isNaN(x) && !isNaN(y)) {
		context.moveTo(x, y);
		var p = this.getLocalXY(points[3]);
		context.lineTo(p.x, p.y);

		if (openStyle.f_fill) {
			context.fill();
		}
		if (openStyle.f_stroke) {
			context.stroke();
		}
	}

	this.setCanvasStyle(style, contextIndex);
	context = this.getContext(contextIndex);
	context.lineWidth = style.lineWidth / this.layer.res;
	context.beginPath();
	context.moveTo(pt[0].x, pt[0].y);
	context.lineTo(pt[1].x, pt[1].y);
	context.arcTo(pt[2].x, pt[2].y, pt[3].x, pt[3].y, geometry.r / this.layer.res);
	context.stroke();

	/*
    context.fillStyle=style.fillStyle;
    context.strokeStyle=style.strokeStyle;
    
    context.beginPath();
    context.moveTo(pt[0].x, pt[0].y);
    context.lineTo(pt[3].x, pt[3].y);
    context.stroke();
	*/
};

Canvas.prototype.drawSector = function (geometry, style, contextIndex) {
	this.setCanvasStyle(style, contextIndex);
	this.rendererSector(geometry, style, contextIndex);
	this.setCanvasStyle(this.reset, contextIndex);
};

Canvas.prototype.drawDoubleCasement = function (geometry, style, contextIndex) {
	this.setCanvasStyle(style, contextIndex);
	this.rendererDoubleCasement(geometry, style, contextIndex);
	this.setCanvasStyle(this.reset, contextIndex);
};

Canvas.prototype.rendererDoubleCasement = function (geometry, style, contextIndex) {
	var points = geometry.points;
	this.setCanvasStyle(openStyle, contextIndex);
	var context = this.getContext(contextIndex);

	//var width=this.layer.getThickness2(geometry);
	var width = geometry.thick;
	context.lineWidth = width / this.layer.res;

	context.beginPath();
	var p1 = this.getLocalXY(geometry.point1);
	var p2 = this.getLocalXY(geometry.point2);
	context.moveTo(p1.x, p1.y);
	context.lineTo(p2.x, p2.y);
	if (openStyle.f_fill) {
		context.fill();
	}
	if (openStyle.f_stroke) {
		context.stroke();
	}

	this.setCanvasStyle(style, contextIndex);
	context = this.getContext(contextIndex);
	context.lineWidth = style.lineWidth / this.layer.res;

	var p3 = this.getLocalXY(geometry.points[0]);
	var p4 = this.getLocalXY(geometry.points[1]);

	context.beginPath();
	context.moveTo(p1.x, p1.y);
	context.lineTo(p2.x, p2.y);
	context.lineTo(p3.x, p3.y);
	context.lineTo(p4.x, p4.y);
	context.closePath();
	context.stroke();

	var r = BABYLON.Vector2.Distance(p1, p2) / 2;

	context.beginPath();
	context.moveTo(p2.x, p2.y);
	context.arc(p2.x, p2.y, r, geometry.points[2], geometry.points[3]);
	context.closePath();
	context.stroke();

	context.beginPath();
	context.moveTo(p1.x, p1.y);
	context.arc(p1.x, p1.y, r, geometry.points[4], geometry.points[5]);
	context.closePath();
	context.stroke();
}

Canvas.prototype.drawSingleCasement = function (geometry, style, contextIndex) {
	this.setCanvasStyle(style, contextIndex);
	this.rendererSingleCasement(geometry, style, contextIndex);
	this.setCanvasStyle(this.reset, contextIndex);
};

Canvas.prototype.rendererSingleCasement = function (geometry, style, contextIndex) {
	var points = geometry.points;
	this.setCanvasStyle(openStyle, contextIndex);
	var context = this.getContext(contextIndex);

	//var width=this.layer.getThickness2(geometry);
	var width = geometry.thick;
	context.lineWidth = width / this.layer.res;

	context.beginPath();
	var p1 = this.getLocalXY(geometry.point1);
	var p2 = this.getLocalXY(geometry.point2);
	context.moveTo(p1.x, p1.y);
	context.lineTo(p2.x, p2.y);
	if (openStyle.f_fill) {
		context.fill();
	}
	if (openStyle.f_stroke) {
		context.stroke();
	}

	this.setCanvasStyle(style, contextIndex);
	context = this.getContext(contextIndex);
	context.lineWidth = style.lineWidth / this.layer.res;

	var p3 = this.getLocalXY(geometry.points[0]);
	var p4 = this.getLocalXY(geometry.points[1]);

	context.beginPath();
	context.moveTo(p1.x, p1.y);
	context.lineTo(p2.x, p2.y);
	context.lineTo(p3.x, p3.y);
	context.lineTo(p4.x, p4.y);
	context.closePath();
	context.stroke();

	context.beginPath();
	context.moveTo(p2.x, p2.y);
	//context.lineTo(p1.x,p1.y);
	var r = BABYLON.Vector2.Distance(p1, p2);
	context.arc(p2.x, p2.y, r, geometry.points[2], geometry.points[3]);
	//context.lineTo(p2.x,p2.y);
	context.closePath();
	context.stroke();
};

Canvas.prototype.drawSlidingDoor = function (geometry, style, contextIndex) {
	this.setCanvasStyle(style, contextIndex);
	this.rendererSliding(geometry, style, contextIndex);
	this.setCanvasStyle(this.reset, contextIndex);
};
Canvas.prototype.drawSlidingWindow = function (geometry, style, contextIndex) {
	this.setCanvasStyle(style, contextIndex);
	this.rendererSliding(geometry, style, contextIndex);
	this.setCanvasStyle(this.reset, contextIndex);
}

Canvas.prototype.drawBiFoldDoor = function (geometry, style, contextIndex) {
	this.setCanvasStyle(style, contextIndex);
	this.rendererBiFoldDoor(geometry, style, contextIndex);
	this.setCanvasStyle(this.reset, contextIndex);
};

Canvas.prototype.drawSpiral = function (geometry, style, contextIndex) {
	this.setCanvasStyle(style, contextIndex);
	this.rendererSpiral(geometry, style, contextIndex);
	this.setCanvasStyle(this.reset, contextIndex);
};

Canvas.prototype.drawWinderStair = function (geometry, style, contextIndex) {
	this.setCanvasStyle(style, contextIndex);
	this.rendererWinderStair(geometry, style, contextIndex);
	this.setCanvasStyle(this.reset, contextIndex);

	var measurepoints = {};
	measurepoints.arrows1 = geometry.arrowpoints.arrows1;
	measurepoints.arrows2 = geometry.arrowpoints.arrows2;
	measurepoints.border1 = geometry.borderpoints.border1;
	measurepoints.border2 = geometry.borderpoints.border2;

	var lines = null;
	if (geometry.temp_points.length > 0) {
		lines = this.layer.calculateElement.getWallMappingPoints(measurepoints, geometry.temp_points, 1);
	} else {
		lines = this.layer.calculateElement.getWallMappingPoints(measurepoints, geometry.points, 1);
	}

	this.setCanvasStyle(measureStyle, contextIndex);
	this.rendererMeasure(lines, 1, contextIndex);
	this.setCanvasStyle(this.reset, contextIndex);

};

Canvas.prototype.rendererSliding = function (geometry, style, contextIndex) {
	this.context.save();
	this.setCanvasStyle(openStyle, contextIndex);
	var context = this.getContext(contextIndex);

	context.beginPath();

	var pt = [];
	var points = geometry.points;
	for (var i = 0; i < points.length; ++i) {
		var temp = this.getLocalXY(points[i]);
		pt.push(temp);
	}

	//var width=this.layer.getThickness2(geometry);
	var width = geometry.thick;
	context.lineWidth = width / this.layer.res;
	context.beginPath();
	context.moveTo(pt[0].x, pt[0].y);
	context.lineTo(pt[1].x, pt[1].y);
	if (openStyle.f_fill) {
		context.fill();
	}
	if (openStyle.f_stroke) {
		context.stroke();
	}

	context.strokeStyle = "rgba(255, 255, 255, .8)";
	context.fillStyle = "rgba(255, 255, 255, .4)";

	context.lineWidth = 1;
	context.moveTo(pt[1].x, pt[1].y);
	context.lineTo(pt[0].x, pt[0].y);

	context.lineTo(pt[2].x, pt[2].y);
	context.lineTo(pt[3].x, pt[3].y);
	context.lineTo(pt[4].x, pt[4].y);
	context.lineTo(pt[5].x, pt[5].y);

	context.closePath();

	context.fill();
	context.stroke();
	this.context.restore();
};

Canvas.prototype.rendererSpiral = function (geometry, style, contextIndex) {
	var point = geometry.point;
	var points = geometry.points;

	var radius1 = this.layer.parameter.spiralR1 / this.layer.res;
	var radius2 = this.layer.parameter.spiralR2 / this.layer.res;
	var twoPi = Math.PI * 2;
	var pt = this.getLocalXY(point);

	var context = this.getContext(contextIndex);

	context.beginPath();
	context.arc(pt.x, pt.y, radius1, 0, twoPi, true);
	context.stroke();
	context.closePath();

	context.beginPath();
	for (var i = 0; i < points.length; ++i) {
		var p = this.getLocalXY(points[i]);
		context.moveTo(pt.x, pt.y);
		context.lineTo(p.x, p.y);
		context.stroke();
	}
	context.closePath();

	context.beginPath();
	context.strokeStyle = style.strokeStyle2;
	context.globalAlpha = style.globalAlpha2;
	context.globalAlpha = 1;
	var p1 = this.getLocalXY(geometry.point1);
	context.moveTo(p1.x, p1.y);
	context.lineTo(pt.x, pt.y);
	context.stroke();

	var p2 = this.getLocalXY(geometry.point2);
	context.moveTo(p2.x, p2.y);
	context.lineTo(pt.x, pt.y);
	context.stroke();
	context.closePath();

	context.beginPath();
	context.arc(pt.x, pt.y, radius2, 0, twoPi, true);
	context.stroke();
	context.fill();
	context.closePath();

	context.strokeStyle = style.strokeStyle2;
	context.globalAlpha = style.globalAlpha2;
	context.beginPath();
	context.arc(pt.x, pt.y, radius1, geometry.sAngle, geometry.eAngle);
	context.stroke();
	context.closePath();
	context.globalAlpha = 0.5;
};

Canvas.prototype.rendererWinderStair = function (geometry, style, contextIndex) {
	var points = geometry.points;
	var context = this.getContext(contextIndex);
	this.setCanvasStyle(style, contextIndex);
	if (points.length == 0) {
		return;
	} else if (points.length == 1 && geometry.linkedpoints.length == 0) {
		var radius = this.layer.parameter.selectCircle_R;
		var twoPi = Math.PI * 2;
		var pt = this.getLocalXY(points[0]);

		context.beginPath();
		context.moveTo(pt.x, pt.y);
		context.arc(pt.x, pt.y, radius, 0, twoPi, true);
		context.closePath();
		context.fill();
	} else if (geometry.linkedpoints.length > 0) {
		context.beginPath();
		for (var i = 0; i < geometry.linkedpoints.length; ++i) {
			var p1 = this.getLocalXY(geometry.linkedpoints[i][1]);
			var p2 = this.getLocalXY(geometry.linkedpoints[i][2]);
			context.moveTo(p1.x, p1.y);
			context.lineTo(p2.x, p2.y);
			context.stroke();
		}

		for (var i = 0; i < geometry.borderpoints.border1.length - 1; ++i) {
			var p1 = this.getLocalXY(geometry.borderpoints.border1[i]);
			var p2 = this.getLocalXY(geometry.borderpoints.border1[i + 1]);
			context.moveTo(p1.x, p1.y);
			context.lineTo(p2.x, p2.y);
			context.stroke();
		}

		for (var i = 0; i < geometry.borderpoints.border2.length - 1; ++i) {
			var p1 = this.getLocalXY(geometry.borderpoints.border2[i]);
			var p2 = this.getLocalXY(geometry.borderpoints.border2[i + 1]);
			context.moveTo(p1.x, p1.y);
			context.lineTo(p2.x, p2.y);
			context.stroke();
		}

	}


};

Canvas.prototype.rendererBiFoldDoor = function (geometry, style, contextIndex) {
	var points = geometry.points;
	this.setCanvasStyle(openStyle, contextIndex);
	var context = this.getContext(contextIndex);

	//var width=this.layer.getThickness2(geometry);
	var width = geometry.thick;
	context.lineWidth = width / this.layer.res;

	context.beginPath();
	var p1 = this.getLocalXY(geometry.point1);
	var p2 = this.getLocalXY(geometry.point2);
	context.moveTo(p1.x, p1.y);
	context.lineTo(p2.x, p2.y);
	if (openStyle.f_fill) {
		context.fill();
	}
	if (openStyle.f_stroke) {
		context.stroke();
	}

	this.setCanvasStyle(style, contextIndex);
	context = this.getContext(contextIndex);
	context.lineWidth = style.lineWidth / this.layer.res;

	var r = BABYLON.Vector2.Distance(geometry.point1, geometry.point2) / 2;
	var p3 = this.getLocalXY(geometry.points[0]);
	var p4 = this.getLocalXY(geometry.points[1]);
	var p5 = this.getLocalXY(geometry.points[2]);

	context.beginPath();
	context.moveTo(p3.x, p3.y);
	context.arcTo(p4.x, p4.y, p5.x, p5.y, r / this.layer.res);
	context.moveTo(p5.x, p5.y);
	context.stroke();

	var p6 = this.getLocalXY(geometry.points[3]);
	var p7 = this.getLocalXY(geometry.points[4]);
	var p8 = this.getLocalXY(geometry.points[5]);
	context.beginPath();
	context.moveTo(p6.x, p6.y);
	context.arcTo(p7.x, p7.y, p8.x, p8.y, r / this.layer.res);
	context.moveTo(p8.x, p8.y);
	context.stroke();

	var p9 = this.getLocalXY(geometry.points[6]);
	var p10 = this.getLocalXY(geometry.points[7]);
	var p11 = this.getLocalXY(geometry.points[8]);

	var p12 = this.getLocalXY(geometry.points[9]);
	var p13 = this.getLocalXY(geometry.points[10]);
	var p14 = this.getLocalXY(geometry.points[11]);

	context.shadowColor = "rgba(0, 0, 0, .7)";
	context.shadowBlur = 1;
	context.lineWidth = 3 / this.layer.res;

	context.beginPath();
	context.moveTo(p5.x, p5.y);
	context.lineTo(p9.x, p9.y);
	context.lineTo(p10.x, p10.y);
	context.lineTo(p11.x, p11.y);
	context.closePath();
	context.fill();
	context.stroke();

	context.beginPath();
	context.moveTo(p8.x, p8.y);
	context.lineTo(p12.x, p12.y);
	context.lineTo(p13.x, p13.y);
	context.lineTo(p14.x, p14.y);
	context.closePath();
	context.fill();
	context.stroke();
};

Canvas.prototype.drawSimpleDoor = function (geometry, style, contextIndex) {
	this.setCanvasStyle(style, contextIndex);
	this.rendererSimpleDoor(geometry, style, contextIndex);
	this.setCanvasStyle(this.reset, contextIndex);
};

Canvas.prototype.rendererSimpleDoor = function (geometry, style, contextIndex) {
	var points = geometry.points;
	this.setCanvasStyle(openStyle, contextIndex);
	var context = this.getContext(contextIndex);

	//var width=this.layer.getThickness2(geometry);
	var width = geometry.thick;
	context.lineWidth = width / this.layer.res;

	context.beginPath();
	var p1 = this.getLocalXY(geometry.point1);
	var p2 = this.getLocalXY(geometry.point2);
	context.moveTo(p1.x, p1.y);
	context.lineTo(p2.x, p2.y);
	if (openStyle.f_fill) {
		context.fill();
	}
	if (openStyle.f_stroke) {
		context.stroke();
	}

	this.setCanvasStyle(style, contextIndex);
	context = this.getContext(contextIndex);
	context.lineWidth = style.lineWidth / this.layer.res;

	context.beginPath();
	var p3 = this.getLocalXY(geometry.points[0]);
	var p4 = this.getLocalXY(geometry.points[1]);
	var p5 = this.getLocalXY(geometry.points[2]);
	var p6 = this.getLocalXY(geometry.points[3]);
	var p7 = this.getLocalXY(geometry.points[4]);
	var p8 = this.getLocalXY(geometry.points[5]);

	context.moveTo(p3.x, p3.y);
	var r = BABYLON.Vector2.Distance(geometry.point1, geometry.point2);
	context.arcTo(p4.x, p4.y, p5.x, p5.y, r / this.layer.res);
	context.moveTo(p5.x, p5.y);
	context.stroke();

	context.beginPath();
	context.moveTo(p5.x, p5.y);
	context.lineTo(p6.x, p6.y);
	context.lineTo(p7.x, p7.y);
	context.lineTo(p8.x, p8.y);
	context.closePath();

	context.shadowColor = "rgba(0, 0, 0, .7)";
	context.shadowBlur = 1;
	context.lineWidth = 3 / this.layer.res;
	context.fill();
	context.stroke();
};

Canvas.prototype.rendererSector = function (geometry, style, contextIndex) {

	var start = geometry.startAngle;
	var end = geometry.endAngle;
	var pt = this.getLocalXY(geometry);
	var r = 70;

	var context = this.getContext(contextIndex);

	context.beginPath();
	context.moveTo(pt.x, pt.y);

	var flag = false;

	if (Math.abs(end - start) > Math.PI) {
		flag = true;
	}

	context.arc(pt.x, pt.y, r, start, end, flag);
	context.closePath();
	context.stroke();
	context.fill();

	var angle = 180 * Math.abs(end - start) / Math.PI;

	if (angle > 180) {
		angle = 360 - angle;
	}
	var text = Math.round(angle) + " °";
	var textpoint;
	if (flag) {
		textpoint = {
			x: pt.x - r * Math.cos((end + start) / 2),
			y: pt.y - r * Math.sin((end + start) / 2)
		};
	} else {
		textpoint = {
			x: pt.x + r * Math.cos((end + start) / 2),
			y: pt.y + r * Math.sin((end + start) / 2)
		};
	}
	context.fillStyle = "#FAFAFA";
	context.beginPath();

	context.arc(textpoint.x, textpoint.y, context.measureText(text).width / 2 + 5, 0, 2 * Math.PI),
		context.fill();
	context.stroke();
	context.fillStyle = "#888";
	context.font = "8px sans-serif";
	context.textAlign = "center";
	context.textBaseline = "middle";
	context.fillText(text, textpoint.x, textpoint.y);
};

Canvas.prototype.drawText = function (geometry, style, contextIndex) {
	this.setCanvasStyle(style, contextIndex);
	this.rendererText(geometry, contextIndex);
	this.setCanvasStyle(this.reset, contextIndex);
};

Canvas.prototype.rendererText = function (geometry, contextIndex) {
	var points = geometry.points;
	var pt = this.getLocalXY(new Point(points[0].x, points[0].y));

	var context = this.getContext(contextIndex);

	context.fillText(geometry.name, pt.x, pt.y);
};

Canvas.prototype.drawLine = function (geometry, style, contextIndex) {
	this.setCanvasStyle(style, contextIndex);
	this.rendererPath(geometry, style, contextIndex);
	this.setCanvasStyle(this.reset, contextIndex);
};

Canvas.prototype.drawOpen = function (geometry, style, contextIndex) {
	this.setCanvasStyle(style, contextIndex);
	this.rendererOpen(geometry, style, contextIndex);
	this.setCanvasStyle(this.reset, contextIndex);
};

Canvas.prototype.drawSliding = function (geometry, style, contextIndex) {
	this.setCanvasStyle(style, contextIndex);
	this.rendererSliding(geometry, style, contextIndex);
	this.setCanvasStyle(this.reset, contextIndex);
};

Canvas.prototype.drawLineWithMeasure = function (geometry, rendererType, contextIndex) {
	//this.setCanvasStyle(style,contextIndex);
	//this.rendererPath(geometry, rendererType, contextIndex);
	//this.setCanvasStyle(this.reset,contextIndex);

	this.setCanvasStyle(measureStyle, contextIndex);
	this.drawSymbolMeasure(geometry.points[0], geometry.points[1], geometry.wallType, contextIndex);
	this.setCanvasStyle(this.reset, contextIndex);
};

Canvas.prototype.drawSymbolMeasure = function (point1, point2, type, contextIndex) {

	var context = this.getContext(contextIndex);
	context.beginPath();

	var calculateLine = this.layer.calculateLine;
	var distance = BABYLON.Vector2.Distance(point1, point2) / meter;

	//var arrows=calculateLine.gettwoline(point1,point2,type);
	var distance2;
	if (type == 1) {
		distance2 = 30;
	} else {
		distance2 = 15;
	}

	var arrows = calculateLine.getParallelLineForDistance(calculateLine.createLine(point1, point2), distance2);

	var mid = {
		x: (point1.x + point2.x) / 2,
		y: (point1.y + point2.y) / 2
	};

	var inpt1 = calculateLine.getJoinLinePoint(point1, arrows.line1);
	var inpt2 = calculateLine.getJoinLinePoint(point2, arrows.line1);
	var inmeter = calculateLine.getJoinLinePoint(mid, arrows.meter1);

	inpt1 = this.getLocalXY(inpt1);
	inpt2 = this.getLocalXY(inpt2);
	inmeter = this.getLocalXY(inmeter);

	context.moveTo(inpt1.x, inpt1.y);
	context.lineTo(inpt2.x, inpt2.y);
	context.stroke();
	context.fillText(distance.toFixed(2) + "m", inmeter.x, inmeter.y);
	this.drawArrow(inpt1, inpt2, contextIndex);
	this.drawArrow(inpt2, inpt1, contextIndex);

	var outpt1 = calculateLine.getJoinLinePoint(point1, arrows.line2);
	var outpt2 = calculateLine.getJoinLinePoint(point2, arrows.line2);
	var outmeter = calculateLine.getJoinLinePoint(mid, arrows.meter2);

	outpt1 = this.getLocalXY(outpt1);
	outpt2 = this.getLocalXY(outpt2);
	outmeter = this.getLocalXY(outmeter);

	context.moveTo(outpt1.x, outpt1.y);
	context.lineTo(outpt2.x, outpt2.y);
	context.stroke();
	context.fillText(distance.toFixed(2) + "m", outmeter.x, outmeter.y);
	this.drawArrow(outpt1, outpt2, contextIndex);
	this.drawArrow(outpt2, outpt1, contextIndex);
};

Canvas.prototype.drawWall = function (geometry, rendererType, contextIndex, floorstyle) {
	this.setCanvasStyle(rendererType, contextIndex);
	this.rendererWallPath(geometry, rendererType, contextIndex, floorstyle);
	this.setCanvasStyle(this.reset, contextIndex);

	if (!floorstyle) {
		var wallpoint = this.layer.calculateElement.computerMeasure(geometry);
		if (geometry.state == 1) {
			wallpoint = this.layer.calculateElement.changeEndPointMeasure(wallpoint, geometry);
		}
		var lines = this.layer.calculateElement.getWallMappingPoints(wallpoint, geometry.points, geometry.state);

		//geometry.border1=wallpoint.border1;
		//geometry.border2=wallpoint.border2;
		for (var i = 0; i < wallpoint.border1.length; ++i) {
			geometry.wallInfo[i].border1 = wallpoint.border1[i];
			geometry.wallInfo[i].border2 = wallpoint.border2[i];
		}

		this.setCanvasStyle(measureStyle, contextIndex);
		this.rendererMeasure(lines, geometry.state, contextIndex);
		this.setCanvasStyle(this.reset, contextIndex);
	}
};

Canvas.prototype.rendererMeasure2 = function (lines, geometry, contextIndex) {
	var context = this.getContext(contextIndex);
	context.beginPath();

	var mixlin = [];
	var maxlout = [];

	var inpt_0 = null;
	var inpt2_x = null;
	var outpt_0 = null;
	var outpt2_x = null;

	if (geometry.state == 1) {
		if (geometry.wallInfo[0].newarrow1 != null && typeof (geometry.wallInfo[0].newarrow1) != "undefined") {
			inpt_0 = this.getLocalXY(geometry.wallInfo[0].newarrow1);
			delete geometry.wallInfo[0].newarrow1;
		}

		if (geometry.wallInfo[lines.length].newarrow1 != null && typeof (geometry.wallInfo[lines.length].newarrow1) != "undefined") {
			inpt2_x = this.getLocalXY(geometry.wallInfo[lines.length].newarrow1);
			delete geometry.wallInfo[lines.length].newarrow1;
		}

		if (geometry.wallInfo[0].newarrow2 != null && typeof (geometry.wallInfo[0].newarrow2) != "undefined") {
			outpt_0 = this.getLocalXY(geometry.wallInfo[0].newarrow2);
			delete geometry.wallInfo[0].newarrow2;
		}

		if (geometry.wallInfo[lines.length].newarrow2 != null && typeof (geometry.wallInfo[lines.length].newarrow2) != "undefined") {
			outpt2_x = this.getLocalXY(geometry.wallInfo[lines.length].newarrow2);
			delete geometry.wallInfo[lines.length].newarrow2;
		}
	}

	for (var i = 0; i < lines.length; ++i) {
		mixlin.push(lines[i].border1Line1);
		maxlout.push(lines[i].border2Line1);

		var inpt = this.getLocalXY(lines[i].arrow1Line1);
		var inpt2 = this.getLocalXY(lines[i].arrow1Line2);
		var outpt = this.getLocalXY(lines[i].arrow2Line1);
		var outpt2 = this.getLocalXY(lines[i].arrow2Line2);

		if (i == 0) {
			if (inpt_0 != null) {
				inpt = inpt_0;
			}
			if (outpt_0 != null) {
				outpt = outpt_0;
			}
		}

		if (i == lines.length - 1) {
			if (inpt2_x != null) {
				inpt2 = inpt2_x;
			}
			if (outpt2_x != null) {
				outpt2 = outpt2_x;
			}
		}

		var indistance = lines[i].distance1;
		var outdistance = lines[i].distance2;
		var inlinecenter = this.getLocalXY(lines[i].text1pt);
		var outlinecenter = this.getLocalXY(lines[i].text2pt);

		context.moveTo(inpt.x, inpt.y);
		context.lineTo(inpt2.x, inpt2.y);
		context.stroke();
		context.fillText(indistance.toFixed(2) + "m", inlinecenter.x, inlinecenter.y);
		this.drawArrow(inpt, inpt2, contextIndex);
		this.drawArrow(inpt2, inpt, contextIndex);

		context.moveTo(outpt.x, outpt.y);
		context.lineTo(outpt2.x, outpt2.y);
		context.stroke();
		context.fillText(outdistance.toFixed(2) + "m", outlinecenter.x, outlinecenter.y);

		this.drawArrow(outpt, outpt2, contextIndex);
		this.drawArrow(outpt2, outpt, contextIndex);
	}

	if (geometry.state == 0) {
		this.drawArea(mixlin, maxlout);
	}
};

// 绘画标注线上面的文字
Canvas.prototype.rendererLineTagging = function (ps, inlinecenter, indistance, contextIndex) {
	var context = this.getContext(contextIndex);
	var spaceWidth = 12
	var textWidth = 6
	var text = indistance.toFixed(2) + "m"
	var rectW = text.length * textWidth + 2 * spaceWidth
	var rectH = 2 * textWidth
	var start = ps[0],
		end = ps[1];

	if (Math.abs(ps[0].x - ps[1].x) > Math.abs(ps[0].y - ps[1].y)) {
		if (ps[0].x > ps[1].x) {
			start = ps[1]
			end = ps[0]
		} else {
			start = ps[0]
			end = ps[1]
		}
	} else {
		if (ps[0].y > ps[1].y) {
			start = ps[0]
			end = ps[1]
		} else {
			start = ps[1]
			end = ps[0]
		}
	}
	context.save();

	// this.context.save();
	var deg = Math.atan2((end.y - start.y), (end.x - start.x))
	context.translate(inlinecenter.x, inlinecenter.y)
	context.rotate(deg);
	context.translate(-rectW / 2, -rectH / 2)

	context.strokeStyle = null
	context.fillStyle = "#ccc";
	context.rect(0, 0, rectW, rectH);
	context.fill();


	context.translate(spaceWidth, textWidth + textWidth / 2)
	context.fillStyle = "#000000";
	context.fillText(text, 0, 0);

	context.restore();
}

// 会面墙边长度
Canvas.prototype.rendererMeasure = function (lines, state, contextIndex) {
	//var context = this.context;
	var context = this.getContext(contextIndex);
	context.beginPath();

	var mixlin = [];
	var maxlout = [];

	for (var i = 0; i < lines.length; ++i) {

		mixlin.push(lines[i].border1Line1);
		maxlout.push(lines[i].border2Line1);

		var inpt = this.getLocalXY(lines[i].arrow1Line1);
		var inpt2 = this.getLocalXY(lines[i].arrow1Line2);
		var indistance = lines[i].distance1;
		var inlinecenter = this.getLocalXY(lines[i].text1pt);

		// 添加箭头
		this.drawArrow(inpt, inpt2, contextIndex);
		this.drawArrow(inpt2, inpt, contextIndex);

		context.moveTo(inpt.x, inpt.y);
		context.lineTo(inpt2.x, inpt2.y);
		context.stroke();


		// 添加标注
		this.rendererLineTagging([inpt, inpt2], inlinecenter, indistance, contextIndex)
	}

	if (state == 0) {
		this.drawArea(mixlin, maxlout);
	}
};

// 绘画箭头
Canvas.prototype.drawArrow = function (p0, p1, index) {
	var _ANGLE = 20;
	var _RADIUS = 10.0;
	var _ANGLE_CROSS = 90.0;

	var context;
	if (typeof (index) == "undefined") {
		context = this.context;
	} else {
		context = this.getContext(index);
	}

	var nP = {};
	var angle = Math.atan2(p0.x - p1.x, p0.y - p1.y);
	this.context.save();
	//rotate by _ANGLE
	var tAngle = angle - _ANGLE * Math.PI / 180.0;
	nP.x = parseFloat(p1.x) + _RADIUS * Math.sin(tAngle);
	nP.y = parseFloat(p1.y) + _RADIUS * Math.cos(tAngle);
	context.beginPath();
	context.moveTo(p1.x, p1.y);
	context.lineTo(nP.x, nP.y);
	context.stroke();
	//lower part
	tAngle = angle + _ANGLE * Math.PI / 180.0;
	nP.x = parseFloat(p1.x) + _RADIUS * Math.sin(tAngle);
	nP.y = parseFloat(p1.y) + _RADIUS * Math.cos(tAngle);
	context.lineJoin = "miter"
	context.beginPath();
	context.moveTo(p1.x, p1.y);
	context.lineTo(nP.x, nP.y);
	context.stroke();
	this.context.restore();
};

Canvas.prototype.drawArea = function (mixlin, maxlout) {
	var calculateLine = this.layer.calculateLine;
	var context = this.context;
	this.context.save();
	if (mixlin.length != 0) {
		var mixlinposition = [];
		for (var i = 0; i < mixlin.length; ++i) {
			var pt = this.getLocalXY(mixlin[i]);
			mixlinposition.push(pt);
		}
		var centerpoint = calculateLine.getCenterPoint(mixlinposition);
		var area = calculateLine.polygonArea(mixlin);
		var area2 = calculateLine.polygonArea(maxlout);
		context.textBaseline = "middle";
		context.textAlign = "center";
		context.fillText("使用面积：" + area + "m²/建筑面积：" + area2 + "m²", centerpoint.x, centerpoint.y);
		document.getElementById("subsubMenuContainer").innerHTML = area2 + " m2";
	}
	this.context.restore();
};

// 
Canvas.prototype.rendererWallPath = function (geometry, rendererType, contextIndex, floorstyle) {

	var points = geometry.points;
	var len = points.length;

	var context = this.getContext(contextIndex);

	context.beginPath();
	if (geometry.wallType == 1) {
		context.lineWidth = wallThickness / this.layer.res;
	} else {
		context.lineWidth = partitionThickness / this.layer.res;
	}
	var img = geometry.image;
	context.strokeStyle = '#383838';
	// context.createPattern(img, "repeat");
	context.lineCap = 'butt';
	if (floorstyle) {
		context.globalAlpha = floorstyle;
	}

	var start = this.getLocalXY(points[0]);
	var x = start.x;
	var y = start.y;

	if (!isNaN(x) && !isNaN(y)) {
		context.moveTo(x, y);
		if (len == 1) {
			return;
		} else if (len == 2) {
			var pt = this.getLocalXY(points[1]);
			context.lineTo(pt.x, pt.y);
			if (rendererType.f_stroke) {
				context.stroke();
			}
			return;
		}
		for (var i = 1; i < len; ++i) {
			var pt = this.getLocalXY(points[i]);
			context.lineTo(pt.x, pt.y);
		}

		if (geometry.state == 0) {
			context.closePath();
			if (rendererType.f_fill) {
				context.fillStyle = 'white'; //填充白色
				context.fill();
			}
		}
		if (rendererType.f_stroke) {
			context.stroke();
		}
	}
};

Canvas.prototype.rendererPath = function (geometry, rendererType, contextIndex) {
	var points = geometry.points;
	var len = points.length;
	var context = this.getContext(contextIndex);

	if (rendererType.name == "open") {
		rendererType.lineWidth = geometry.width / this.layer.res;
	}

	context.lineWidth = rendererType.lineWidth;

	context.beginPath();
	var start = this.getLocalXY(points[0]);
	var x = start.x;
	var y = start.y;
	if (!isNaN(x) && !isNaN(y)) {
		context.moveTo(x, y);
		for (var i = 1; i < len; ++i) {
			var pt = this.getLocalXY(points[i]);
			context.lineTo(pt.x, pt.y);

			if (rendererType.f_fill) {
				context.fill();
			}
			if (rendererType.f_stroke) {
				context.stroke();
			}

		}
	}
};

Canvas.prototype.rendererOpen = function (geometry, rendererType, contextIndex) {
	var points = geometry.points;
	var len = points.length;
	var context = this.getContext(contextIndex);

	//var width=this.layer.getThickness2(geometry);
	var width = geometry.thick
	context.lineWidth = width / this.layer.res;

	context.beginPath();
	var start = this.getLocalXY(points[0]);
	var x = start.x;
	var y = start.y;
	if (!isNaN(x) && !isNaN(y)) {
		context.moveTo(x, y);
		for (var i = 1; i < len; ++i) {
			var pt = this.getLocalXY(points[i]);
			context.lineTo(pt.x, pt.y);

			if (rendererType.f_fill) {
				context.fill();
			}
			if (rendererType.f_stroke) {
				context.stroke();
			}

		}
	}
};

//设置canvas的样式。
Canvas.prototype.setCanvasStyle = function (style, contextIndex) {
	if (contextIndex == null || typeof (contextIndex) == "undefined") {
		return;
	}
	var context = this.getContext(contextIndex);
	if (style == "reset") {
		//for(var key in defaultStyle)
		//{
		//	context[key]=defaultStyle[key];
		//}
		context.restore();
		return;
	} else {
		context.save();
		for (var key in style) {
			if (key != "fill" && key != "stroke") {
				context[key] = style[key];
			}
		}
		return;
	}
};

//获得一个点的屏幕显示位置。
Canvas.prototype.getLocalXY = function (point) {
	var resolution = this.layer.getRes();
	var extent = this.layer.bounds;
	var x = (point.x / resolution + (-extent.left / resolution));
	var y = ((extent.top / resolution) - point.y / resolution);
	x = (0.5 + x) << 0;
	y = (0.5 + y) << 0;
	return {
		x: Math.floor(x),
		y: Math.floor(y)
	};
};

Canvas.prototype.getInt = function (value) {
	value = (0.5 + value) << 0;
	return value;
};