Ragtime_Kitty
@Ragtime_Kitty

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

Привет.

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

  • Вопрос задан
  • 187 просмотров
Решения вопроса 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
Кривоватый способ, но все же:
Идти из двух точек навстречу, когда расстояние между линиями достигает определенного порогового значения, замыкать эти линии. Демо
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы