Как скопировать сегмент строки на HTML5-тег CANVAS, повернуть его и поместить рядом с исходным сегментом? - PullRequest
Новая
       14

Как скопировать сегмент строки на HTML5-тег CANVAS, повернуть его и поместить рядом с исходным сегментом?

0 голосов
/ 15 октября 2019

Сначала я попытался найти решение своей проблемы, но я не думаю, что знаю, как искать решения в Интернете. Итак, у меня есть это изображение, которое рисуется с помощью отрезков линии: moveTo, lineTo и т. Д.

Как вы можете видеть, мы можем разделить изображение на 4 части, которые по сути одинаковы, но повернуты и размещены рядом с другими элементами. Под этим я подразумеваю, что если вы рисуете 4 линии от центра под углом 90, вы можете заметить один и тот же шаблон.

В основном я пытаюсь нарисовать одну часть холста вручную, вставив moveTo иостальное, чтобы как-то генерировать, чтобы сэкономить время.

Не уверен, что если я хорошо объяснил свою проблему, извините, это мой первый опубликованный вопрос о стековом потоке.

Я имею в виду, что нашел способ сделать это, имея 4 разных элемента CANVAS и затем поворачивая каждыйхолст. Я ищу способ сделать все в одном элементе CANVAS. Но не уверен, что это возможно.

Мой код ниже: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Model 1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body  onload="draw();">
    <canvas id="canvas_id" width="150" height="150" style="border:1px solid #000000;"></canvas>

<!-- 1---->
    <script type="text/javascript">

        function draw() {
            var canvas = document.getElementById('canvas_id');
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');

                //top left square
                ctx.beginPath();
                ctx.moveTo(10, 10);
                ctx.lineTo(10, 40);
                ctx.lineTo(40, 40);
                ctx.lineTo(40, 10);
                ctx.lineTo(10, 10);
                ctx.fillStyle = "red";
                ctx.fill();

                //down left square
                ctx.beginPath();
                ctx.moveTo(10, 100);
                ctx.lineTo(10, 130);
                ctx.lineTo(40,130);
                ctx.lineTo(40, 100);
                ctx.lineTo(10, 100);
                ctx.fillStyle = "red";
                ctx.fill();

                //top right square
                ctx.beginPath();
                ctx.moveTo(100, 10);
                ctx.lineTo(130, 10);
                ctx.lineTo(130, 40);
                ctx.lineTo(100, 40);
                ctx.lineTo(100, 10);
                ctx.fillStyle = "red";
                ctx.fill();

                //down right square
                ctx.beginPath();
                ctx.moveTo(100, 100);
                ctx.lineTo(130, 100);
                ctx.lineTo(130, 130);
                ctx.lineTo(100, 130);
                ctx.lineTo(100, 100);
                ctx.fillStyle = "red";
                ctx.fill();

                //center figure

                //1
                ctx.beginPath();
                ctx.moveTo(70, 10);
                ctx.lineTo(10, 70);
                ctx.lineTo(70, 130);
                ctx.lineTo(130, 70);
                ctx.lineTo(70, 10);

                // inside
                ctx.moveTo(70, 30);
                ctx.lineTo(30, 70);
                ctx.lineTo(70, 110);
                ctx.lineTo(110, 70);
                ctx.lineTo(70, 30);

                //square 1
                ctx.moveTo(60, 60);
                ctx.lineTo(80, 60);
                ctx.lineTo(80, 80);
                ctx.lineTo(60, 80);
                ctx.lineTo(60, 60);

                //square 2
                ctx.moveTo(50, 50);
                ctx.lineTo(90, 50);
                ctx.lineTo(90, 90);
                ctx.lineTo(50, 90);
                ctx.lineTo(50, 50);

                ctx.stroke();
                }
        }
    </script>

</body>

</html>

1 Ответ

0 голосов
/ 15 октября 2019

Надеюсь, я хорошо понял, что вам нужно. Вы можете либо параметризовать свою функцию draw с помощью параметров положения angle и x, y, либо скопировать, повернуть и вставить часть холста. Я предположил, что вы предпочли бы второе решение. По сути, скопируйте свой холст, поверните его, нарисуйте что-нибудь, а затем восстановите изменения. Вы можете использовать эту функцию: 

function draw(canvas, ctx, x, y, angle) {
  ctx.save();
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate(angle * Math.PI / 180);
  ctx.translate(-(canvas.width / 2), -(canvas.height / 2));
  // drawing begin
  ctx.beginPath();
  ctx.moveTo(10, 10);
  ctx.lineTo(10, 40);
  ctx.lineTo(40, 40);
  ctx.lineTo(40, 10);
  ctx.lineTo(10, 10);
  ctx.lineTo(30, 30);
  ctx.strokeStyle = "red";
  ctx.stroke();
  // drawing end
  ctx.restore();
}

Вы можете использовать ее следующим образом: 

// draw something with a 90° angle
draw(canvas, ctx, 0, 0, 90);

// draw something with a 180° angle
draw(canvas, ctx, 0, 0, 180);

Координаты x и y - это координаты повернутого холста, поэтому 0, 0 будет находиться под углом каждый раз.

Вот скрипка: https://jsfiddle.net/nmerinian/kt3f782o/19/

...