使用Angle在画布中绘制箭头 [英] Draw arrow head in canvas using Angle

问题描述

我尝试使用以下代码，但是此代码无法正常工作.实际上，我犹豫要寻求这种简单解决方案的帮助，但是我浪费了很多时间，最后我来到了这里.

I tried with following code, But this code is not working as expected. Actually I hesitated to ask help for this simple solution, But I have wasted lots of time, finally I came here.

deltaX = bounds.right - bounds.left;
deltaY = bounds.bottom - bounds.top;

double distance = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
float arrowLength= (float) (distance / 3);
float lineAngle = (float) Math.atan2(deltaY, deltaX);
float angle = (float) Math.toRadians(20);
float sinValue = (float) Math.sin(lineAngle - angle);
point_x_1 = bounds.left - 20 * sinValue;
point_y_1 = (float) (bounds.bottom - 0.5 * arrowLength* Math.cos(lineAngle - angle));
angle = (float) Math.toRadians(60);
sinValue = (float) Math.sin(lineAngle + angle);
point_x_3 = bounds.left + 20 * sinValue;
point_y_3 = (float) (bounds.bottom + arrowLength* Math.cos(lineAngle + angle));

path.moveTo(bounds.right, bounds.top);
path.lineTo(bounds.left, bounds.bottom);
path.moveTo(point_x_1, point_y_1);
path.lineTo(bounds.left, bounds.bottom);
path.lineTo(point_x_3, point_y_3);

注意:我有四个方向，每个方向都会有不同的情况.

Note: I have four directions, each will come in different scenarios.

enum PathDirection {
    TopLeftToBottomRight,
    TopRightToBottomLeft,
    BottomLeftToTopRight,
    BottomRightToTopLeft
} 

上面我为TopRightToBottomLeft尝试的代码.

Above code I tried for TopRightToBottomLeft.

示例输出

图片1: RectF值:[180.0,560.0] [820.0,740.0]

Pic 1: RectF values: [180.0,560.0][820.0,740.0]

图片2: RectF值:[240.0,480.0] [640.0,980.0]

Pic 2: RectF values: [240.0,480.0][640.0,980.0]

更新

path.reset();
canvas.save();
canvas.translate(200, 200);
float direction = (float) Math.atan2(400 - 200, 400 - 200);
canvas.rotate(direction);
path.moveTo(0, 0);
float distance = (float) Math.sqrt(200 * 200 + 200 * 200);
path.lineTo(distance, 0);
float x1 = distance - (distance * 20 / 100);
float y1 = -(distance * 15 / 100);
path.moveTo(x1, y1);
path.lineTo(distance, 0);
x1 = distance - (distance * 20 / 100);
y1 = (distance * 15 / 100);
path.lineTo(x1, y1);
canvas.drawPath(path, mPaint);
canvas.restore();

我使用此代码从位置200, 200到300, 300绘制线.但这会画出从0, 0到distance的界线.

I used this code to draw line from from position 200, 200 to 300, 300. But this draw the line from 0, 0 to distance.

屏幕截图

推荐答案

在 pskink 的帮助下，我来到了解决方案，示例代码，它用箭头从200, 200到400, 400

With help from pskink I came to the solution, Sample code, which draw the line with arrow head from 200, 200 to 400, 400

path.reset();
RectF rectF = new RectF(200, 200, 400, 400);
canvas.save();
canvas.translate(rectF.left, rectF.top);
float direction = (float) Math.atan2(rectF.bottom - rectF.top, rectF.right - rectF.left);
float degree = (float) Math.toDegrees(direction);
canvas.rotate(degree);
canvas.drawColor(Color.parseColor("#E3F2FD"));
path.moveTo(0, 0);
float x = rectF.right - rectF.left;
float y = rectF.bottom - rectF.top;
float distance = (float) Math.sqrt(x * x + y * y);
path.lineTo(distance, 0);
float x1 = distance - (distance * 20 / 100);
float y1 = -(distance * 15 / 100);
path.moveTo(x1, y1);
path.lineTo(distance, 0);
float x2 = distance - (distance * 20 / 100);
float y2 = (distance * 15 / 100);
path.lineTo(x2, y2);
canvas.drawPath(path, mPaint);
canvas.restore();

SC:

注意:如果您不想旋转画布，可以使用

Note If you don't want to rotate canvas, you can use Helder Sepulveda's answer, it also works as expected.

这篇关于使用Angle在画布中绘制箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！