Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #31 (permalink)  
Старый 26.08.2022, 20:22
Аватар для Alikberov
Кандидат Javascript-наук
Отправить личное сообщение для Alikberov Посмотреть профиль Найти все сообщения от Alikberov
 
Регистрация: 16.08.2018
Сообщений: 109

Сообщение от IZUM Посмотреть сообщение
И, самое главное - нарисовать ромб и окружность, показанные на картинке. Их размеры должны быть сооизмеримы с координатными осями.
(Запустить на gist)
строки #503
// Рисуем на первом графике
	hChart.context.strokeStyle = "blue";
	hChart.transform();	// Трансформации контекста холста под формат графика
	hChart.context.beginPath();
	// Рисуем ромб в точке 7,0
	hChart.context.moveTo(7, 1);
	hChart.context.lineTo(7.5, 0);
	hChart.context.lineTo(7, -1);
	hChart.context.lineTo(6.5, 0);
	hChart.context.closePath();
	// Рисуем эллипс в точке 11,0
	hChart.context.moveTo(11, 0);
	hChart.context.ellipse(11, 0, 0.5, 0.5, 0, 0, 2 * Math.PI);
	// Сбрасываем трансформацию, чтобы толшина кисти восстановилась
	hChart.context.setTransform(1, 0, 0, 1, 0, 0);
	// Отображаем ромб и эллипс
	hChart.context.stroke();
Тaк подойдёт (смотрите изображение)?
Изображения:
Тип файла: jpg romb_ellipse.jpg (15.4 Кб, 4 просмотров)

Последний раз редактировалось Alikberov, 26.08.2022 в 20:28.
Ответить с цитированием
  #32 (permalink)  
Старый 26.08.2022, 20:38
Аспирант
Отправить личное сообщение для IZUM Посмотреть профиль Найти все сообщения от IZUM
 
Регистрация: 21.08.2022
Сообщений: 57

Изображения то, что нужно!
Ответить с цитированием
  #33 (permalink)  
Старый 27.08.2022, 09:46
Аспирант
Отправить личное сообщение для IZUM Посмотреть профиль Найти все сообщения от IZUM
 
Регистрация: 21.08.2022
Сообщений: 57

1. Если, построить ломанную линию (см.рис.1) способом построения геометрической фигуры, то , видимо, нельзя будет определить значения хc и yc в любой точке ломанной линии и площади фигуры под ломанной линией на любом отрезке xn…xk (см. рис.2). Поэтому, наверное, надо данную ломанную линию построить в виде графика функции. Координаты по X : 0, 5, 10, 16, 21, 30, 33. По Y: 0, 2.24, -1.49, 1.5, -1, 0.5, 0.
2. В точках X: 8, 13, 19, 27, 33. Надо построить ромбы, в точках Х: 5, 10, 16, 21, 30. надо построить окружности (не эллипсы). Методом копирования. Приведённые выше числовые данные могут быть произвольными значениями. Хорошо бы было, если были бы удалены теги (строки) относящиеся к остальным графикам и оставлено в коде только то, что относится к графику ломанной линии, ромбов и окружностей. Прошу помочь, так как, мне это точно не осилить….
Изображения:
Тип файла: jpg рис1.jpg (14.4 Кб, 2 просмотров)
Тип файла: jpg рис2.jpg (15.1 Кб, 1 просмотров)

Последний раз редактировалось IZUM, 27.08.2022 в 09:56.
Ответить с цитированием
  #34 (permalink)  
Старый 27.08.2022, 09:58
Аспирант
Отправить личное сообщение для IZUM Посмотреть профиль Найти все сообщения от IZUM
 
Регистрация: 21.08.2022
Сообщений: 57

высыланные в предыдущем сообщении картинки не совсем разборчивы. Высылаю ещё раз
Изображения:
Тип файла: jpg рис 1.jpg (14.7 Кб, 6 просмотров)
Тип файла: jpg рис 2.jpg (15.3 Кб, 5 просмотров)
Ответить с цитированием
  #35 (permalink)  
Старый 27.08.2022, 11:58
Аватар для Alikberov
Кандидат Javascript-наук
Отправить личное сообщение для Alikberov Посмотреть профиль Найти все сообщения от Alikberov
 
Регистрация: 16.08.2018
Сообщений: 109

Сообщение от IZUM Посмотреть сообщение
Прошу помочь, так как, мне это точно не осилить….
Зaпустите gist: Там я добавил текстовое поле с примером, как чертить ромбы и эллипсы прямо на графике.
Следуйте правилам контекста Canvas и добавляйте свои инструкции.
Кликайте на график, чтобы изменения вступили в силу.

Если допустите ошибку, текстовое поле поменяет цвет.
Ответить с цитированием
  #36 (permalink)  
Старый 29.08.2022, 00:37
Аватар для Alikberov
Кандидат Javascript-наук
Отправить личное сообщение для Alikberov Посмотреть профиль Найти все сообщения от Alikberov
 
Регистрация: 16.08.2018
Сообщений: 109

Сообщение от IZUM Посмотреть сообщение
1. Если, построить ломанную линию (см.рис.1) способом построения геометрической фигуры, то , видимо, нельзя будет определить значения хc и yc в любой точке ломанной линии и площади фигуры под ломанной линией на любом отрезке xn…xk (см. рис.2)
Этo элементарная математическая задача и сейчас как программист (в математике я не очень) я попытаюсь её решить.

Дан треугольник с длиной основания 8 пунктов.
Вершина треугольника находится в пункте 5 на высоте 2.24 пункта.

Опишем его переменными:
Ax = 0, Bx = 8
Cx = 5, Cy = 2.24


По сути, мы имеем тут два прямоугольных треугольника:
Ax = 0, Cx = 5, Cy = 2.24	// левый треугольник
Cx = 5, Bx = 8, Cy = 2.24	// правый прямоугольник


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

Находим площадь:
S_left_rect = (Cx - Ax) * Cy	// площадь левого прямоугольника
S_right_rect = (Bx - Cx) * Cy
S_left_triangle = S_left_rect / 2	// площадь левого треугольника AxCxCy
S_right_triangle = S_right_rect / 2	// площадь правого треугольника CxBxCy
S_triangle = S_left_triangle + S_right_triangle	// площадь целого треугольника AxBxCy


Теперь нужно узнать площадь заштрихованной области xn,yn,xk,yk.
Опишем переменными:
xn = 3	// начало штриховки
xk = 6	// конец штриховки
yn = ??? // нужно найти
yk = ??? // нужно найти


Используя метод вычислительного построения линии, находим yn:
delta_x = Cx - Ax	// длина отрезка AxCx (5 пунктов)
yn = (xn - Ax) / delta_x * Cy	// (3 - 0) / 5 * 2.24 = 1.344


Используя метод вычислительного построения линии, находим yk:
delta_x = Bx - Cx	// длина отрезка CxBx (3 пункта)
yk = (Bx - xk) / delta_x * Cy	// (8 - 6) / 3 * 2.24 = 1.493


Теперь мы имеем:
xn = 3	// начало штриховки
xk = 6	// конец штриховки
yn = 1.344 // минимальная высота начала штриховки
yk = 1.493 // минимальная высота конца штриховки


Для начала нужно разобраться, что мы видим под этой штриховкой вообще:
Прямоугольник №1: xn,Cx,yn
Прямоугольник №2: Cx,xk,yk
Прямоугольный треугольник №1: xn,yn,Cy
Прямоугольный треугольник №2: Cx,xk,Cy

Площадь будем искать подобным методом: Через вычитание суммы площадей двух нештрихованных треугольников над заштрихованной областью.

Находим площадь незаштрихованных треугольников и вычитаем её из общей площади:
S_left_rect = (Cx - xn) * Cy	// Прямоугольник xnCxCy: (5 - 3) * 2.24 = 4.48
S_right_rect = (xk - Cx) * Cy	// Прямоугольник xkCxCy: (6 - 5) * 2.24 = 2.24

S_left_triangle = (Cx - xn) * (Cy - yn) / 2	// Треугольник ynCxCy: (5 - 3) * (2.24 - 1.344) / 2 = 0.896
S_right_triangle = (xk - Cx) * (Cy - yk) / 2	// Треугольник xkCxCy: (6 - 5) * (2.24 - 1.493) / 2 = 0.3735


Теперь складываем площади двух нижних заштрихованных прямоугольников с площадами треугольников над ними:
S_hatching = S_left_rect + S_left_triangle + S_right_rect + S_right_triangle	// 7.9895

Как видно, всё не так уж сложно и требует неких навыков программисткого мышления.
Сообщение от IZUM Посмотреть сообщение
2. В точках X: 8, 13, 19, 27, 33. Надо построить ромбы, в точках Х: 5, 10, 16, 21, 30. надо построить окружности (не эллипсы). Методом копирования. Приведённые выше числовые данные могут быть произвольными значениями. Хорошо бы было, если были бы удалены теги (строки) относящиеся к остальным графикам и оставлено в коде только то, что относится к графику ломанной линии, ромбов и окружностей. Прошу помочь, так как, мне это точно не осилить….
А здесь Вы идёте неверным путём!
Так как нужно всего навсего строить ломанную по координатам из массива, на оси X отмечать начало очередной линии, а вот ромбики нужно чертить в точке прохождения линий через нулевую отметку на Y.

Запустите gist: Я добавил отрисовку ломанной по массиву с ромбиками и кружочками.

Вoт здесь я разместил простой скрипт со всеми нужными формулами расчёта площади фигуры под ломанной линией на любом отрезке (в пределах одного треугольника).
(Расчёт площади по ломанной на отрезке со смежными треугольниками требует простого сложения таких площадей с нехитрой эвристикой…)
Изображения:
Тип файла: jpg charts.jpg (19.7 Кб, 1 просмотров)

Последний раз редактировалось Alikberov, 31.08.2022 в 17:00. Причина: Добавил изображение и ссылку на gist, вычисляет площадь заштрихованной области; Добавил ссылку на калькулятор площади
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как нарисовать Солнце средствами HTML 5 Canvas? Antohsa Элементы интерфейса 2 18.09.2013 01:19
Как в canvas нарисовать одно изображение на другом? Dimaz Общие вопросы Javascript 0 29.07.2013 20:11
Как нарисовать один canvas в другом BorodinKO Общие вопросы Javascript 0 06.04.2012 18:20