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

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

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

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

无法理解这个

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

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

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

如何重置HTML5 Canvas的轴

2 个答案: