Как нарисовать прямоугольник внутри другого - PullRequest
Новая
       35

Как нарисовать прямоугольник внутри другого

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

Я получил код, который на основе ввода пользователя рисует прямоугольник. Мне нужно создать еще один прямоугольник внутри первого, как показано на рисунке ниже.

https://imgur.com/zbMNXFv

Я получил следующий код до сих пор. https://codepen.io/newtz/pen/MWWKRYG

    function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);

  context.beginPath();
  context.strokeRect(zoomedX(50), zoomedY(50), zoomed(width), zoomed(height));

}

1 Ответ

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

Каждый раз, когда вы рисуете прямоугольник, вы можете нарисовать меньший внутри. Например, если ширина и высота равны 100, вы вызовете: 

context.strokeRect(0, 0, 100, 100);

Затем вы можете нарисовать меньший прямоугольник, используя предыдущие значения: 

context.strokeRect(0 + 10, 0 + 10, 100 - 20, 100 - 20);

Чтобы разрешить это,вы должны задать параметры для вашей draw() функции, чтобы можно было изменять положение и размер новых прямоугольников: 

draw()  =>  draw(x, y, width, height)

В вашем коде объявите две переменные x и y иназначьте значения по умолчанию (50 в вашем коде).

Тогда ваша draw() функция: 

function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);

  context.beginPath();
  context.strokeRect(zoomedX(50), zoomedY(50), zoomed(width), zoomed(height));

}

Изменится так: 

function draw(x, y, width, height) {      
  context.beginPath();
  context.strokeRect(zoomedX(x), zoomedY(y), zoomed(width), zoomed(height));
}

Теперь у него есть параметры. Нам также необходимо удалить инструкцию очистки: эта функция предназначена для рисования, только эта. Более того, если вы не удалите очищающую линию, каждый чертеж удалит ранее нарисованные прямоугольники.

Наконец, вызовите функции draw(...) в ваших обратных вызовах: 

$width.addEventListener("keyup", function () {
    width = this.value;
    context.clearRect(0, 0, canvas.width, canvas.height);
    draw(x, y, width, height);
    draw(x + 5, y + 5, width - 10, height - 10);
    draw(x + 10, y + 10, width - 20, height - 20);
}, false);

То же самое дляheight. Поэтому каждый раз, когда вы обновляете значение width или height, оно будет рисовать 3 вложенных прямоугольника.

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

Для теста я создал drawMultiple(x, y, width, height) функция, которая рисует три прямоугольника: 

function drawMultiple(x, y, width, height) {
    draw(x, y, width, height);
    draw(x + 5, y + 5, width - 10, height - 10);
    draw(x + 10, y + 10, width - 20, height - 20);
}
...