Как нарисовать точки и соединить их линиями HTML по клику - PullRequest
Новая
       18

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

0 голосов
/ 02 марта 2020

Как я могу создать точку в html (используя js), затем создать следующую и соединить их линией? Я хотел бы создать различные формы, используя линии, а затем как-то изменить цвет вне этой формы (например, c треугольник). Пожалуйста, ведите меня к пути.

Ответы [ 3 ]

0 голосов
/ 02 марта 2020

Я бы рекомендовал использовать Canvas. Вы могли бы сделать что-то вроде этого 

// HTML
<canvas id="canvas"></canvas>

// Javascript
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext('2d');
var Points = []; //The points are stored in a object array {x,y}

var Redraw = ()=>{
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    Points.forEach((point, index, arr) => {

     // This is what adds the dots on the canvas
     ctx.beginPath();
     ctx.arc(point.x, point.y, 2, 0, 2 * Math.PI);
     ctx.fill();

     if(arr.length > 1){
        if(index == arr.length -1){
          // This connects the last point to the first
          ctx.beginPath();
          ctx.moveTo(point.x, point.y);
          ctx.lineTo(arr[0].x, arr[0].y);
          ctx.stroke();
        }
        else{
          // Connects the current point to the next
          ctx.beginPath();
          ctx.moveTo(point.x, point.y);
          ctx.lineTo(arr[index + 1].x, arr[index + 1].y);
          ctx.stroke();
        }
     }
  });


}

canvas.addEventListener("click", e=> {
    // Every time the canvas is clicked add the point to the Point Array
    // And Redraw it
    Points.push({x: e.clientX, y: e.clientY});

    Redraw();
})

Redraw();

Используя Canvas Documentation , вы сможете добавить цвета в фигур .. Это можно сделать, нарисовав контур фигуры с помощью команды LineTo и заменив объект вместо поглаживания, так как это просто нарисует фигуру

Обратите внимание на код, который я выбрал выше нарисовать каждую линию индивидуально вместо целой фигуры, которая была бы идеальной, но сделать это таким образом легче понять

Надеюсь, это поможет ..

- Steinar

Редактировать

Чувствовал себя плохо из-за того, что не завершил код .. Извините .. 

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext('2d');
var Points = [{x:100, y:100}, {x:20, y:200}]

var Update = ()=>{
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  // Draw the shape
  ctx.beginPath();
  Points.forEach((point, index, arr) => {
    if(arr.length > 1){

          if(index == 0) 
             ctx.moveTo(point.x, point.y);

          if(index != arr.length -1) 
             ctx.lineTo(arr[index + 1].x, arr[index + 1].y);

       }
  });
  ctx.fillStyle = "#ddf7f7"; //this is the shapes color
  ctx.closePath();
  ctx.fill();
  ctx.stroke();

  // Draw the dots, this should be done last due to then they are above the path
  ctx.fillStyle = "#000"
  Points.forEach((point, index, arr) => {
     ctx.beginPath();
     ctx.arc(point.x, point.y, 2, 0, 2 * Math.PI);
     ctx.fill();
  });

}

canvas.addEventListener("click", e=> {
    Points.push({x: e.offsetX, y: e.offsetY});
    Update();
})

Update();

Обнаружил ошибку в первой версии кода, я использовал clientX и clientY, это должно было быть offsetX и offseY.

Вы также можете заметить, что в части кода Draw Shape я не использовал { и }, это потому, что если у вас есть оператор if, который запускает только одну строку кода, они не нужны обходимо

0 голосов
/ 02 марта 2020

Вы можете попробовать что-то вроде этого 

// if we are in drawing mode
var hasDot = false;

document.addEventListener('mousemove', onMouseMove);

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

document.getElementById('canvas').onclick = function(event) {
    // -10 is for the cursor pointer, but I guess, you need to specify this margin for different OS
    ctx.fillRect(event.clientX - 10,event.clientY - 10,4,4);
    if (!hasDot) {
        // enter the drawing mode
        hasDot = true;
    }
}

function onMouseMove(event) {
    //drawing lines
    if (hasDot) {
        ctx.lineTo(event.clientX - 10, event.clientY - 10);
        ctx.stroke();
    }
}

// don't forget to reset drawing mode somewhere
function reset() {
    hasDot = false;
}
0 голосов
/ 02 марта 2020 

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
        
document.getElementById("dot1").onclick = function(){
  ctx.fillRect(10,10,1,1);
};
document.getElementById("dot2").onclick = function(){
  ctx.fillRect(190,90,1,1);
};
    
document.getElementById("line").onclick = function(){
  ctx.moveTo(10, 10);
  ctx.lineTo(190, 90);
  ctx.stroke();
};
      <canvas id="canvas" width="200" height="100" style="border:1px solid #000000;">
    </canvas>
    <br/>
    <button id="dot1">Dot1</button><button id="dot2">Dot2</button><button  id="line">Line</button>
...