Рисуете генератор ветряных турбин css & html или canvas? - PullRequest
Новая
       5

Рисуете генератор ветряных турбин css & html или canvas?

0 голосов
/ 31 августа 2018

Ищу совета. Я должен нарисовать ветрогенератор. Я предполагаю, что это возможно с html, css или canvas, но, может быть, это заняло бы целую вечность.

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

Он также должен быть отзывчивым.

enter image description here

Маленькие кусочки меняют цвет в зависимости от данных. Поэтому я подумываю заменить изображения в зависимости от этого.

Любая рекомендация ?. Заранее спасибо.

1 Ответ

0 голосов
/ 31 августа 2018

Вы можете очистить эту кошку несколькими способами, но если вы уверены, что это все компоненты, которые вам нужны (и вам не нужно будет расширять ее), я согласен, что canvas - это излишнее количество.

Вероятно, все, что вам нужно, это какая-то разметка, подобная этой: 

<div id="turbine">
    <div id="injector"></div>
    <div id="motor"></div>
    <div id="block"></div>
    <div id="battery"></div>
</div>

И немного CSS, который выглядит примерно так: 

#turbine {
    background: url("turbine-main.png");
    position: relative;
}
#injector {
    background: url("injector-green.png");
    position: absolute;
    left: 160px;
    top: 130px;
    width: 40px;
    height: 30px;
}
#injector.failing {
    background: url("injector-red.png");
}
#motor {
    background: url("motor-green.png");
    position: absolute;
    left: 220px;
    top: 140px;
}
#motor.failing {
    background: url("motor-red.png");
}

Промыть и повторить для каждой части (корректируя имена изображений, координаты и размер по мере необходимости, чтобы ваши куски хорошо подходили к основному изображению). Добавьте и удалите класс failing из ваших отдельных частей, чтобы переключать красный / зеленый для каждой части, возможно, используя javascript. (Или просто сделайте это в HTML, если это статически отображаемая страница.)

Если вам удастся щелкнуть эти детали двигателя и перейти к дополнительной информации, замените мои <div> на <a>.

...