Easeljs нарисовать различные виды стрелок

Question

Это приложение выполнено с Easeljs, чтобы работать в холсте HTML5.

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

Для иллюстрации:

поле для рисования на

стрелки рисовать на поле

Функциональность должна выглядеть следующим образом:

• Нажмите на кнопку
• Нарисовать линию
• В случае MouseUp: преобразовать строку в соответствующую стрелку
• Стрелка должна быть перетаскивать и изменяемыми

Как бы я получить этот результат?

Answer 1

Вы можете легко рисовать стрелки, используя API-интерфейс Graphics. Я провел около 20 минут делая это демо:

• http://jsfiddle.net/lannymcnie/ukjb1g2g/2/
• http://jsfiddle.net/lannymcnie/ukjb1g2g/3/

Код:

var w = startX - endX; 
var h = startY - endY; 
var lineLength = Math.sqrt(w*w+h*h); 

arrow.graphics.clear().setStrokeStyle(3).beginStroke("#000").moveTo(0,0); 
// Logic to draw to the end. This is just a straight line 
arrow.lineTo(lineLength-arrowHeadSize, 0); 

arrow.graphics.beginFill("#000"); 
arrow.graphics.drawPolyStar(lineLength, 0, arrowHeadSize, 3); 

// Rotate 
arrow.rotation = Math.atan2(h, w) * 180/Math.PI; 

Рисунок его прямо и вращая это самый простой способ для добавления эффектов к линия. Демонстрация, которую я написал, рисует своего рода синусоидальную волну, подобную одному из ваших примеров. Есть еще немного волшебства, чтобы сделать его правильной длиной и т. Д.