Canvas基础知识-图形的旋转

图形开发canvashtml5

旋转是线性变换的一种，它指的是将一个向量（或者点）的x和y坐标围绕一个固定点旋转一定的角度。当我们想要知道旋转后的新坐标（, ）时，可以使用以下等式进行换算：

新坐标的x值（）是原坐标的x值（x）与旋转角度的正余弦值的乘积之差，再减去原坐标的y值（y）与旋转角度的正弦值的乘积。

新坐标的y值（）是原坐标的y值（y）与旋转角度的余弦值的乘积之和，再加上原坐标的x值（x）与旋转角度的正弦值的乘积。

此外，我们还可以用矩阵的方式来描述旋转变换。旋转变换的矩阵形式如下：

这是一个2x2的矩阵，其中包含了旋转角度的正余弦值。通过矩阵乘法，我们可以轻松地将原坐标转换为旋转后的新坐标。

旋转运算的过程可以表示为：

新坐标的矩阵等于旋转变换矩阵与原坐标矩阵的乘积。这个乘积的结果就是旋转后的新坐标矩阵，其中包含了新坐标的x和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
44
45
46
47
48
49
50
51
<!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>
    <input type="range" id="slideBar" min="0" max="90" style="margin-top:20px; width:600px" value="30" />
</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": 360, "y": 140, "text": "←逆时针旋转30°", "style":fontStyle });
    layer.getSource().add(text);    
    
    // 变形之后的数据层
    let layer2 = graph.addLayer({"opacity":0.9});
    let image = new Image({ "x": 200, "y": 150, "rotation":-30, "origin":[200, 300], "src": "/examples/graph/images/square_150.png" });
    layer2.getSource().add(image);
    
    // render
    graph.render();

    // ----------------------- 界面操作控制 ----------------------- 
    let slideBar = document.getElementById("slideBar");
    slideBar.addEventListener("change", function(e){
		graph.prop(image, "rotation", - this.value);
		graph.prop(text, "text", "←逆时针旋转" + Math.round(parseInt(this.value)) + "°");
	})
</script>

</html>

尝试一下 »

上一篇：在图形系统中，如何实现图层管理？

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