html5-canvas - 如何重置 HTML5 Canvas 的轴

Question

我对 html5 很陌生。
事实上，这是我的第一部作品。

我正在做一个小项目。该项目的一部分是读取其中包含形状的 xml 文件

  <Graphic>
     <object_type>LINE</object_type>
     <field_1>3.6082475185394287</field_1>
     <field_2>541.23712158203125</field_2>
     <field_3>28.86598014831543</field_3>
     <field_4>474.48452758789062</field_4>
     <field_6 />
     <field_7 />
     <field_8 />
     <field_9 />
  </Graphic>
  <Graphic>
     <object_type>LINE</object_type>
     <field_1>10.824742317199707</field_1>
     <field_2>562.8865966796875</field_2>
     <field_3>3.6082475185394287</field_3>
     <field_4>541.23712158203125</field_4>
     <field_6 />
     <field_7 />
     <field_8 />
     <field_9 />
  </Graphic>

读取 xml 文件后，我正在遍历坐标。并在 html5 Canvas 上绘制对象。

我有两个麻烦......

1)照片被颠倒了......所以我需要旋转 Canvas
Image can be viewed here

2)我需要在 Canvas 内缩放整个对象。现在我将每个坐标除以 8 以缩小它。我如何根据屏幕分辨率和 Canvas 缩放它...

无法理解这个

Answer 1

如果你能够得到对象的宽高，你只需要计算与 Canvas 相关的比例因子:

var scaleFactorW = canvas.width/obj.width,
    scaleFactorH = canvas.height/obj.height;

context.scale(scaleFactorW , scaleFactorH);
startDrawing(obj);

看到这个 DEMO在 jsfiddle.net

编辑:

为了保持不同 Canvas 分辨率的对象比例，我们需要计算一个比例因子，以根据 Canvas 纵横比和对象比例验证最大比例。

var canvasAspectRatio = canvas.width / canvas.height;
var objAspectRatio = obj.width / obj.height;

var scaleFactor = 1;

if (canvasAspectRatio > objAspectRatio) {        
    scaleFactor = canvas.height / obj.height;        
} else {
    scaleFactor = canvas.width / obj.width;        
}
context.scale(scaleFactor, scaleFactor);

startDrawing(obj)