如何重置 HTML5 Canvas 的轴答案

【问题标题】：how to reset the axix of HTML5 Canvas如何重置 HTML5 Canvas 的轴
【发布时间】：2013-06-28 07:22:34
【问题描述】：

我对 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 画布上绘制对象。

我有两个烦恼....

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

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

无法理解这个

【问题讨论】：

标签： html5-canvas

【解决方案1】：

如果你能得到物体的宽高，你只需要计算与画布相关的比例因子：

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

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

在 jsfiddle.net

上看到这个 DEMO

编辑：

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

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)

【讨论】：

感谢您的回复...在您提供的帮助下，我能够完成几乎所有的工作。但是我仍然面临一些问题...... 1）当页面首次加载时，我正在检查屏幕宽度和高度并相应地调整我的画布大小。然后当有人调整窗口大小时，我正在调整画布大小......这样做您提供的缩放方法会使绘图被压扁。我已经尝试重绘，但仍然是同样的问题......对此有任何见解
在上面的例子中，我不关心纵横比。无论画布纵横比如何，我都只是将对象放在画布上。等等，我会尝试更新答案来做到这一点。
我在一个文件中绘制了近 783 个对象，在一个文件中绘制了超过 1000 个对象。使用您的方法一切正常，只是它会在重新调整窗口和画布大小时减慢重绘速度。对此有何建议...？
context.scale 的使用次数过多可能会减慢速度。您可以确定应用程序的纵横比，而不是每个对象。假设您的图形已准备好以 800x600 画布分辨率绘制。对于不同的显示器或不同的分辨率，只需计算 scaleFactor 并使用 context.scale 一次。

【解决方案2】：

做了一点数学后找到了第一个问题的答案......

我的画布是

    <canvas id="myCanvas" width="800" height="500" style="background: #FFFFFF; border: 5px solid black;" role="img">
        Your browser does not support the canvas element.
    </canvas>

然后 javascript 变成了...

        startDrawing(obj);

        // rotate 180 degrees clockwise
        context.rotate(180*(Math.PI/180));

        // translate context to opposite of your actual canvas
        context.translate(-800, -500);

仍然需要第二个问题的答案....缩放

【讨论】：