Canvas基础知识-图形的缩放

图形开发canvashtml5

缩放，听起来好像是个挺复杂的概念，但其实它就是改变物体大小的过程。具体来说，它是通过按照一定的比例调整一个向量或点的x和y坐标来实现的。

要把缩放前的坐标(x, y)变成缩放后的新坐标(, )，我们有个简单的公式：


在这个公式里，sx和sy分别是横向和纵向的缩放倍数。如果你想知道缩放后的横坐标，就把原来的x坐标乘以sx；同样，要知道缩放后的纵坐标，就把原来的y坐标乘以sy。

用矩阵来表示缩放，就是这个样子：

整个缩放运算过程可以写成这样：

还有几个小知识点需要注意：

  • 如果sx和sy相等，那么缩放就是等比例的，意味着物体的形状不会改变，只是大小变了。
  • 如果s（sx或sy）大于1，那么图形就会放大。
  • 如果s小于1，图形就会缩小。
  • 如果sx等于-1，那么图形会在x轴上对称变换，也就是水平翻转。
  • 如果sy等于-1，那么图形会在y轴上对称变换，也就是垂直翻转。

这就是缩放的基本概念和一些细节。看起来可能有点复杂，但只要理解了这些基础知识，后面学习更高级的内容就会轻松很多。

示例效果与源代码：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>

<head>
    <title>缩放</title>
    <meta charset="UTF-8">
</head>

<body style="overflow: hidden; margin:10px;">
    <div id="graphWrapper" style="width:600px; height:400px; border:solid 1px #CCC;"></div>
</body>

<script type="module">
    import { Graph, Image, Circle, Polyline, Polygon, Text, debug, MathUtil } from "/examples/src/index.js";

    // graph对象
    let graph = new Graph({
        "target": "graphWrapper"
    });

    // 网格水印层
    debug.generateGrid(Object.assign({ "interval": 10, "graph":graph }, graph.getSize()));
    let fontStyle = { "textBaseline": "bottom", "fillColor": "black", "fontSize": 24, "fontName": "sans-serif" };
    
    // 变形之前的数据层
    let layer = graph.addLayer();
    layer.getSource().add(new Polyline({"coords":[[550,300],[50,300]], "style":{"lineWidth":2, "color":"#000000"}, "endArrowType":1}));
    layer.getSource().add(new Polyline({"coords":[[200,50],[200,550]], "style":{"lineWidth":2, "color":"#000000"}, "endArrowType":1}));
    layer.getSource().add(new Image({ "x": 200, "y": 150, "src": "/examples/graph/images/square_150_bg.png" }));
    
    let text = new Text({ "x": 260, "y": 80, "text": "水平缩放:0.8, 垂直缩放:1.2", "style":fontStyle });
    layer.getSource().add(text);    
    
    // 变形之后的数据层
    let layer2 = graph.addLayer({"opacity":0.9});
    let image = new Image({ "x": 280, "y": 110, "width": 120, "height": 180, "src": "/examples/graph/images/square_150.png" });
    layer2.getSource().add(image);
    
    // render
    graph.render();
</script>

</html>

尝试一下 »

上一篇：在地理图形系统中什么是图层管理？

下一篇：Canvas画布操作如何实现图形平移？