2

我对 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）照片被颠倒了......所以我需要旋转画布 图像可以在这里查看

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

我无法理解这个

4

2 回答 2

2

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

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

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

在jsfiddle.net上查看这个演示

编辑：

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

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)
于 2013-06-26T14:49:18.900 回答
1

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

我的画布是

    <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);

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

于 2013-06-26T13:27:39.283 回答