Ragtime_Kitty
@Ragtime_Kitty

Как нарисовать ломанную линию в канвасе?

Привет.

Подскажите, пожалуйста, как нарисовать ломанную линию из точки A в точку B через канвас?
Примерно так:
5cfa60432bd4a310152629.png
Т.е. изгиб через каждое случайное число пикселей, с чередующейся стороной (знаком плюс/минус) и случайным отклонением.
Пыталась сделать через несколько линий, каждый раз двигая координаты и прибавляя случайное число, но получается какой-то веник :(
В математику я не умею, если можно - объясните, пожалуйста, на пальцах или лучше примером.
Спасибо ♥

  • Вопрос задан
  • 104 просмотра
Решения вопроса 1
twobomb
@twobomb
Вот написал демку для примера.
Ну основные функции
/// (начальный х, начальный у,конечный х,конечный у, минимальная длина линии,макс длинная линии, минимальная угол отклонения, макс угол отклонение) вернет массив точек
function generateLines(xStart,yStart,xEnd,yEnd, lenRandMin,lenRandMax,angleDeviationMin, angleDeviationMax ){
	var arrayPos = [[xStart,yStart]];
  var xCur = xStart;
  var yCur = yStart;
  angleDeviationMin = (angleDeviationMin * Math.PI)/180;//в радианы
  angleDeviationMax = (angleDeviationMax * Math.PI)/180;//в радианы
  
  var deviationPos = false;
  do{
  	if(getDist(xCur,yCur,xEnd,yEnd) <= lenRandMax){
      xCur = xEnd;
      yCur = yEnd;
    }
    else{
    	var len = rand(lenRandMin,lenRandMax);
      var angle = getAngle(xCur,yCur,xEnd,yEnd) + (deviationPos?rand(angleDeviationMin,angleDeviationMax):-rand(angleDeviationMin,angleDeviationMax));
    	xCur += Math.cos(angle) * len;
      yCur += Math.sin(angle) * len;
    }
    arrayPos.push([xCur,yCur]);
    deviationPos = !deviationPos;
  }while(!(xCur == xEnd && yCur == yEnd));
  return arrayPos;
}
//Получить угол между двумя точками
function getAngle(dx,dy,dx1,dy1){
	return Math.atan2(dy - dy1,dx - dx1) + Math.PI;
}
///Получить растояние между двумя точками
     function getDist(x,y,x1,y1){
         return Math.sqrt(Math.pow(x1 - x,2)+Math.pow(y1-y,2));
     }
//Получить рандомное от min до max
function rand(min, max) {
  return min + Math.random() * (max - min)
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
hzzzzl
@hzzzzl
залей веник на https://codepen.io, будем пробовать :)
Ответ написан
@i1yas
Кривоватый способ, но все же:
Идти из двух точек навстречу, когда расстояние между линиями достигает определенного порогового значения, замыкать эти линии. Демо
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы