将形状旋转为原点上的点阵列

问题描述

我有一个Web应用程序，它接收一些点数组，我需要将它们绘制在画布上。不幸的是，我无法获得想要的数据集。我需要将形状旋转180度。我不知道该怎么做...

请参见摘要中的示例。

Sub updatedisplayList()
Rem Just define work sheets:
Dim wsSource As Worksheet: Set wsSource = Worksheets("REPORT_DOWNLOAD")
Dim wsTarget As Worksheet: Set wsTarget = Worksheets("disPLAY")
Rem
Dim rSearch As Range,rWhat As Range,rBase As Range,oCell As Range
Dim vVar As Variant
Rem Column A of source sheet:
    Set rSearch = Application.Intersect(wsSource.UsedRange,wsSource.Columns(1)).Offset(1,0)
Rem 3 first cells in columns which will be copied
    Set rBase = wsSource.Range("B1:D1")
Rem Range with data to search: used part of column M
    Set rWhat = Application.Intersect(wsTarget.UsedRange,wsTarget.Range("M:M"))
    For Each oCell In rWhat
        If Not IsEmpty(oCell) Then
            vVar = Application.Match(oCell.Value,rSearch,0)
            If Not IsError(vVar) Then
                rBase.Offset(vVar,0).copy Destination:=oCell.Offset(0,6)
Rem If you want to clear target cells when value not found in source sheet:
            Else
                oCell.Offset(0,6).Resize(1,3).ClearContents
            End If
        End If
    Next oCell
End Sub

// Main template shape
let shape = [{x: 10,y:10},{x: 120,{x: 110,y:110},{x: 50,y:175}];

let canvas = {}; // Canvas to draw on
let ctx = {}; // Context of the Canvas

// Init elements
$( document ).ready(function() {
    canvas = document.getElementById("myCanvas");
    ctx = canvas.getContext("2d");
    drawShape();
});

// Draw the template
function drawShape() {
    ctx.save();

    ctx.beginPath();
    ctx.strokeStyle = 'yellow';
    ctx.fillStyle = 'red';
    for(let point of shape) {
        ctx.lineto(point.x,point.y);
    }
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

    ctx.restore();
}

解决方法

如果我正确理解了您的问题，您想将图形旋转180度吗？如在垂直方向上反转呢？如果是这样，这是一个解决方案，您需要一个相对于其旋转的轴。问题是，如果您只是对每个点（x，y）求反，则将（x，-y）放进去，画布仅定义为不会在屏幕上显示的正值，请想象它超出了屏幕，您需要将其向下推回画布上，您可以通过在反转形状后增加画布的高度来实现。

// Main template shape
let shape = [ {x:10,y:10},{x:120,{x:110,y:110},{x:50,y:175} ];

let canvas = {}; // Canvas to draw on
let ctx = {}; // Context of the Canvas

// Init elements
$( document ).ready(function() {
    canvas = document.getElementById("myCanvas");
    ctx = canvas.getContext("2d");
    drawShape();
});

// Draw the template
function drawShape() {
    ctx.save();

    ctx.beginPath();
    ctx.strokeStyle = 'yellow';
    ctx.fillStyle = 'red';
    for(let i = 0; i < shape.length; i++) {
        ctx.lineTo(shape[i][0],-shape[i][1] + 200);
    }
    for(let point of shape) {

        ctx.lineTo(point.x,-point.y + 200);
    }
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

    ctx.restore();
}

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Hahaha!</title>
</head>

<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas>
</body>
</html>

2d html5-canvas javascript