4

Передо мной стоит следующая задача. Есть рисунок (.jpg, .png) плана помещения. На нём необходимо выводить маркеры, обозначающие датчики с цветовой индикацией (красный, жёлтый, зелёный). Состояние датчиков будет обновляться с некоторым интервалом.

Собственно, как мне совместить рисунок с картой и расположение датчиков? Надо учесть адаптивную вёрстку (то есть сохранять пропорции рисунка и расположение датчиков)?
CRUD для изменения рисунка и расположения датчиков?

Опыта работы с графикой в javascript/angular не имею, потому возникла проблема, как это всё реализовать, с чего начать.

2 ответа 2

3

Можно конечно и на канве рисовать, однако проще всего использовать svg:

  for (let i = 0; i < 4; i++)
  fakeServerData(i)


function fakeServerData(i){

  setTimeout(fakeServerData.bind(0,i),(1+Math.random())*2000);

  let hue = 60 * Math.floor(Math.random()*3)
  document.getElementById('element_' + i)
            .style.setProperty('fill', `hsl(${hue},66%,66%)`)

}
body {
  margin: 0;
  overflow: hidden;
}

circle {
  transition: 300ms;
  stroke: black;
}
<svg viewbox="0,0,794,540" width=100vw height=100vh>
  <image width=794 height=540 
         xlink:href='https://i.imgur.com/Bgr6YPM.png'></image>
  <circle id=element_0 cx=130 cy=404 r=17></circle>
  <circle id=element_1 cx=680 cy=404 r=17></circle>
  <circle id=element_2 cx=680 cy=144 r=17></circle>
  <circle id=element_3 cx=385 cy=60  r=17></circle>
</svg>

2

Вот так это можно сделать на канве:

let pts = [[130,404], [680,404], [680,144], [385,60]];
let img = new Image();
img.src="https://i.imgur.com/Bgr6YPM.png";
img.onload = function () {
  test.width = img.width
  test.height = img.height
};

for(let i=0; i<4; i++)
  fakeServerData(i);

function fakeServerData(i) {
  setTimeout(fakeServerData.bind(0,i), 2000*(1+Math.random()));
  let hue = 60 * Math.floor(Math.random()*3);
  pts[i][2] = `hsl(${hue},66%,66%)`; 
  redraw();
}

function redraw() {
  let ctx = test.getContext("2d");
  ctx.drawImage(img, 0, 0);
  pts.forEach(pt => {
    ctx.beginPath();
    ctx.arc(pt[0], pt[1], 17, 0, 2 * Math.PI);
    ctx.fillStyle = pt[2];
    ctx.fill();
    ctx.stroke();
  });
}
#test {
  width: 100vw;
}

body { 
  margin: 0;
}
<canvas id=test></canvas>

1
  • Спасибо, за вариант! Буду пробовать Commented 20 нояб. 2019 в 8:46

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.