canvas draw

需求
1 加载图像显示到canvas中心
2 对其放大移动旋转操作
3 支持对图像画各种图形标记
4 支持查看这些标记的坐标（相对于图像）

代码思路：
1 根据canvas宽高，计算图像宽高，画到中心，图像scale值1 angle值0 translate值0（正向运算 scale -> rotate -> translate ）
2 点击获取点在图像上的坐标：( 反向运算 (point - translate) /scale / angle - clientOffset ),放大旋转的中心点是canvas的中心，clientOffset是因为图像显示在中心了，需要计算左上点offset值
3 把图形标记好后，渲染出来，正向运算 (point + clientOffset) * scale * rotate + translate ）

核心代码：

// 鼠标点击canvas获取图片坐标
function convertPoint (canvasPoint){

	canvasPoint=canvasPoint.subtract( Vector.create(imgConfig.translate) )

	var left=(config.canvasW-imgConfig.width)/2;
	var top=(config.canvasH-imgConfig.height)/2;

	var clientOff=Vector.create([left,top] )

    var cansCenter=Vector.create( [config.canvasW/2,config.canvasH/2] );
	var newDot=scale(canvasPoint, 1/imgConfig.scaleVal,cansCenter);
	newDot=rotate(newDot,-imgConfig.angle,cansCenter);
	return newDot.subtract(clientOff);
}

//拿到图片上点的位置 算出绘画的坐标
function getCanvasPonit(imgPoint){
	var left=(config.canvasW-imgConfig.width)/2;
	var top=(config.canvasH-imgConfig.height)/2;
	var clientOff=Vector.create([left,top] );
	var cans=imgPoint.add(clientOff)

	var cansCenter=Vector.create( [config.canvasW/2,config.canvasH/2] )

	var newDot=scale(cans,imgConfig.scaleVal,cansCenter);
	newDot=rotate(newDot,imgConfig.angle,cansCenter);
	return newDot.add(  Vector.create(imgConfig.translate) ) ;
}