Arrow (strzałka)
Strona korzysta ze skryptu arrows.js
Listing
/**
* Tworzy obiekt typu Arrow
*
* @param endX
* float - współrzędna x tylnego końca strzałki
* @param endY
* float - współrzędna y tylnego końca strzałki
* @param arrowLength
* float - długość strzałki
* @param arrowWidth
* float - grubość strzałki
* @param arrowAngle
* float - kat pod ktorym jest skierowana strzalka katy podawane sa w
* stopniach, kat zerowy to polozenie godziny 3.00, katy wzrastaja w
* kierunku przeciwnym do wskazowek zegara
* @param brudLength
* float - długość grota mierzona wzdłuż osi strzałki
* @param brudAngle
* float - kąt między osią strzałki a brzegiem grota
* @param close
* boolean - true - grot bez wcięcia, false - grot z wcięciem
*/
function drawArrow(endX, endY, arrowLength, arrowWidth, arrowAngle, brudLength,
brudAngle, close) {
this.endX = endX;
this.endY = endY;
this.arrowLength = arrowLength;
this.arrowAngle = arrowAngle;
this.brudLength = brudLength;
this.brudAngle = brudAngle;
this.close = close;
var cosa = Math.cos(degToRad(arrowAngle));
var sina = Math.sin(degToRad(arrowAngle));
var half = arrowWidth / 2.0;
var cosah = cosa * half;
var sinah = sina * half;
var startX = endX + arrowLength * Math.cos(degToRad(-arrowAngle));
var startY = endY + arrowLength * Math.sin(degToRad(-arrowAngle));
var middleX = endX + (arrowLength - brudLength)
* Math.cos(degToRad(-arrowAngle));// x7
var middleY = endY + (arrowLength - brudLength)
* Math.sin(degToRad(-arrowAngle));// y7
var cosb = Math.cos(degToRad(brudAngle));
var sinb = Math.sin(degToRad(brudAngle));
var w2 = half * cosb / sinb;
var mmiddleX = endX + (arrowLength - w2) * Math.cos(degToRad(-arrowAngle));//
var mmiddleY = endY + (arrowLength - w2) * Math.sin(degToRad(-arrowAngle));//
var w3 = brudLength - w2;
var w4 = w3 * sinb / cosb;
var w5 = w4 + half;
// -
var x1 = endX - sinah;
var y1 = endY - cosah;
var x2 = endX + sinah;
var y2 = endY + cosah;
var x5 = middleX + sinah;
var y5 = middleY + cosah;
var x6 = middleX - sinah;
var y6 = middleY - cosah;
var x8 = mmiddleX + sinah;
var y8 = mmiddleY + cosah;
var x9 = mmiddleX - sinah;
var y9 = mmiddleY - cosah;
var x10 = middleX + sina * w5;
var y10 = middleY + cosa * w5;
var x11 = middleX - sina * w5;
var y11 = middleY - cosa * w5;
ctx.save();
ctx.beginPath();
if (this.close) {
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x5, y5);
ctx.lineTo(x10, y10);
ctx.lineTo(x8, y8);
ctx.lineTo(startX, startY);
ctx.lineTo(x9, y9);
ctx.lineTo(x11, y11);
ctx.lineTo(x6, y6);
ctx.closePath();
} else {
ctx.moveTo(x11, y11);
ctx.lineTo(x9, y9);
ctx.moveTo(x10, y10);
ctx.lineTo(x8, y8);
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x8, y8);
ctx.lineTo(startX, startY);
ctx.lineTo(x9, y9);
ctx.closePath();
}
ctx.restore();
};
/*
* funkcja zamienia stopnie na radiany
*/
// k¹t deg podajemy w stopniach
var degToRad = function(deg) {
return Math.PI * deg / 180.0;
};
/*
* funkcja zamienia radiany na stopnie k¹t rad podajemy w radianach
*/
var radToDeg = function(rad) {
return rad * 180.0 / Math.PI;
};
var arrowLength = function(x1, y1, x2, y2) {
var distance = 0.0;
var x3 = x1 - x2;
var y3 = y1 - y2;
distance = Math.sqrt(x3 * x3 + y3 * y3);
return distance;
};
var atan2Deg = function(yy, xx) {
return Math.atan2(yy, xx) * 180.0 / Math.PI;
};
var arrowAngle = function(x1, y1, x2, y2) {
var x3 = x1 - x2;
var y3 = y1 - y2;
return atan2Deg(x3, y3);
};
var cv = document.getElementById("canvas");
var ctx = cv.getContext("2d");
//-
ctx.lineWidth=5;
ctx.fillStyle="red";
ctx.strokeStyle="black";
drawArrow(100, 100, 200, 30, 25, 75, 25, false);
ctx.fill();
ctx.stroke();
//-
ctx.lineWidth=5;
ctx.fillStyle="magenta";
ctx.strokeStyle="magenta";
drawArrow(300, 100, 200, 30, 25, 75, 25, true);
ctx.fill();
ctx.stroke();
//-
ctx.fillStyle="blue";
drawArrow(100, 200, 100, 2, 35, 15, 15, true);
ctx.fill();
//-
ctx.fillStyle="orange";
drawArrow(250, 150, 100, 2, 235, 50, 5, true);
ctx.fill();
//-
ctx.fillStyle="cyan";
ctx.lineWidth = 8;
ctx.strokeStyle ="black";
ctx.lineCap="square";
ctx.lineJoin="round";
drawArrow(450, 150, 200, 50, 190, 65, 15, false);
ctx.fill();
ctx.stroke();