Nano Hash - криптовалюты, майнинг, программирование

Как найти точку пересечения двух прямоугольников?

Я пытаюсь нарисовать два прямоугольника как одну фигуру и включить аннотацию угла, используя холст HTML5.

Готовая версия, которую я пытаюсь получить, выглядит примерно так:

введите здесь описание изображения

Как найти точку пересечения внутреннего угла, чтобы узнать, где нарисовать аннотацию угла?

let canvas=document.getElementById("canvas");
let ctx=canvas.getContext("2d");
    
// rectangle dimensions    
let height = 50;
let width = 200;

// starting coordinates
let x = 20;
let y = 20;

// translate to starting coordinates
ctx.translate(x, y);

// draw first rectangle 
ctx.strokeRect(0,0,width,height);

// translate to the end of the first rectangle
ctx.translate(width, 0);

// rotate canvas by 45 degrees
ctx.rotate(45 * Math.PI / 180);

// draw second rectangle
ctx.strokeRect(0,0,width,height);
<!doctype html>
<html>
<head>
<style>
    body{ background-color: rgb(255, 255, 255); }
</style>
</head>
<body>
    <canvas id="canvas" width=700 height=500></canvas>
</body>
</html>

canvas html5-canvas geometry
03.12.2020

  • Вы не слишком старались в своем фрагменте кода... Разбейте эту задачу на линии, прямоугольник состоит всего из 4 линий, а точка их пересечения представляет собой базовую геометрию: topcoder.com/community/competitive-programming/tutorials/ 03.12.2020

Ответы:


1

Если мы посмотрим на две ваши перекрывающиеся фигуры, мы сможем заметить кое-что интересное: точку, которую вы хотите узнать, и две близлежащие точки образуют треугольник.

Давайте посмотрим поближе и посмотрим, какие параметры этого треугольника нам известны:

  • сторона c - это просто высота прямоугольника
  • точка B - начальная точка первого прямоугольника + его ширина
  • точка A - начальная точка первого прямоугольника + его ширина и высота
  • угол между b и c - 90°
  • угол между с и а - как вы можете видеть, это ровно половина поворота (45° / 2 = 22,5°)
  • угол между b и a - остаток после вычитания двух предыдущих углов из 180° (67,5°)

Теперь нас интересует точка C, которая находится на расстоянии стороны b от точки A.

Со всей информацией, приведенной выше, мы приходим к выводу, что этот треугольник является так называемым треугольником ASA, что означает «Угол, Сторона, Угол» - поскольку мы знаем два угла и сторону между углами. .

Согласно закону синусов, мы можем получить сторону b, используя это удобное уравнение:

Вот интерактивный пример:

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
   
let height = 50;
let width = 200;

let x = 20;
let y = 20;
let rotation = 45;
let radius = 30;
let angle;
let missingSide;

function draw() {
  document.getElementById("sliderLabel").innerText = "rotation: " + rotation + "°";
  angle = 180 - 90 - rotation / 2;
  missingSide = (height / Math.sin(angle * Math.PI / 180)) * Math.sin((rotation / 2) * Math.PI / 180);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x + width - missingSide, x + height, radius, 0, 2 * Math.PI, false);
  ctx.stroke();
  ctx.save();
  ctx.fillStyle = 'grey';
  ctx.translate(x, y);
  ctx.fillRect(0, 0, width, height);
  ctx.translate(width, 0);
  ctx.rotate(rotation * Math.PI / 180);
  ctx.fillRect(0, 0, width, height);
  ctx.restore();
}
draw();

document.getElementById("slider").addEventListener("input", function(e) {
  rotation = parseInt(e.target.value);
  draw();
})
<div>
  <input type="range" min="0" max="90" value="45" id="slider">
  <label for="slider" id="sliderLabel">Volume</label>
</div><br>
<canvas id="canvas" width=440 height=250></canvas>

03.12.2020
  • Это отличное объяснение, и предоставленный пример кода высоко ценится. Большое спасибо. 05.12.2020
  • Спасибо за добрые слова, Найл - я рад, что смог помочь! знак равно 07.12.2020
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..