首页 > 操作系统 >

canvas 画箭头_canvas 画箭头_canvas 箭头

电脑杂谈　发布时间：2019-07-16 11:08:15　来源：网络整理

canvas 箭头_canvas 画箭头_canvas 画箭头

我们一开始知道的有：

image.png

函数形式为：

drawArrow(x1,y1,x2,y2,style,which,angle,length)

用Math.atan2（y，x）来求角度。

（canvas的角度是从x正轴开始以逆时针方向计算全是负角度。）

1111111.jpg

对于象限I和II，它返回角度α作为负角度（-π<=α<= 0），对于象限III和IV，它返回角度α（0 <=α<=π）。

image.png

考虑从（x0，y0）到（x1，y1）的直线。

atan2（y1-y0，x2-x0）给出了它的角度，但是是逆时针的，我们的θ是顺时针的角。

为了弄清楚θ的角度，我们需要将θ加到α的相反位置。在弧度中，与α相反的是π+α。因此，箭头顶侧的角度为π+α+θ，箭头的底线角度为π+α - θ。

解读：

其实这段话的意思是：

1111111.jpg

我们已知θ角多少度了，但是不知道箭头在canvas坐标系中的角度。

当我们用atan2（y1-y0，x2-x0）计算出来了α角后

α+π，就是箭柄线段的角度了

那么

箭头上线段的角度就是 π+α+θ

箭头下线段的角度就是 π+α-θ

定向边坐标方向角的计算步骤如下：陀螺方位角=测线方向值-陀螺北方向值地理方位角=陀螺方位角+仪器常数坐标方位角=地理方位角-子午线收敛角仪器常数可在已知方位角的导线上或三角点测定，按下式计算出仪器常数测量地理方位角时可用到，一般在用于煤矿金属矿进行陀螺方位角及控制导线测量时用不到仪器常数。104. 闭和导线坐标计算过程中，闭合差的计算与调整有___角度闭合差的计算及其调整坐标增量闭合差的计算及其调整_______。精确瞄准 3.读数 §4-3 水平角测量平笺守膏刺钳缓便辨轨场挑妙龙惑丫湛们杖成沮伴纵痛坐指炎酥侨革蹈糠经纬仪及角测量经纬仪及角测量二、水平角观测方法（一）测回法（两个方向的单角观测）地面上有若干点a、b、c、d、等，前进方向如图箭头所示，则位于前进方向左边的角度称为左角，位于前进方向右边的角度称右角。

image.png

由于cos（θ）= d / h，那么h = d / cos（θ）。

现在，d是一个长度，因此总是一个正数，余弦，取决于角度可以是正数或负数。

我们希望斜边也是一个长度，所以我们将取绝对值。h=Math.abs(d/Math.cos(angle)).。

image.png

canvas 画箭头_canvas 箭头_canvas 画箭头

解读：这是通过θ角度和d，求出了h，然后我们在通过canvas坐标系的π+α-θ的余弦值和hcanvas 画箭头，可以得到该下线段的x和y坐标

从点（x2，y2）开始并以角度angle1向h距离，点（topx1，topy1）等于

(x2+Math.cos(angle1)h,y2+Math.sin(angle1)h)

类似地，给定箭头底部的角度（角度2），箭头底部的后角（botx，boty）的x和y值是

(x2+Math.cos(angle2)h,y2+Math.sin(angle2)h)

下面是部分源码

// 计算箭柄角度

var lineangle=Math.atan2(y2-y1,x2-x1);

// 箭头一端线段长度

var h=Math.abs(d/Math.cos(angle));

圆形在图形绘制中也经常用到，由半径和中心坐标控制，下面是实现的hlsl代码，同样也是通过把圆形细分为特定数量线段进行逼近canvas 画箭头，根据角度计算圆形上线段的两端顶点．。这里用到的两个api方法，moveto和lineto分别是线段的起点和终点坐标，变量为（x坐标,y坐标）,strokestyle、stroke分别路径绘制样式和绘制路径。图上应根据需要绘制规划用地范围线、拆迁范围线、道路红线、及绿线、蓝线、紫线、黄线，并用坐标标注，图上还须标明出入口的方位或位置。

if(which&1){ // 处理远端的箭头

var angle1=lineangle+Math.PI+angle;

var topx=x2+Math.cos(angle1)h;

var topy=y2+Math.sin(angle1)h;

var angle2=lineangle+Math.PI-angle;

var botx=x2+Math.cos(angle2)h;

var botx=y2+Math.sin(angle2)h;

toDrawHead(ctx,topx,topy,x2,y2,botx,boty,style);

}

if(which&2){ //处理近端的箭头

var angle1=lineangle+angle;

var topx=x1+Math.cos(angle1)h;

var topy=y1+Math.sin(angle1)h;

var angle2=lineangle-angle;

var botx=x1+Math.cos(angle2)h;

var boty=y1+Math.sin(angle2)h;

ctx.beginPath();

toDrawHead(ctx,topx,topy,x1,y1,botx,boty,style);

}

减分的仿真与此类似，因为是以加法实现，本质与加分相同，当计分复位端 rst=0 时，可以计分。端肩膀：俯视时头部和身体有一个明显的夹角，也是为了不破坏鱼身的球型线条。前脸采用了箭头式的前大灯，前保险杠两侧线条与其相呼应，同时发动机舱盖隆起部分也呈现v型线条，整体感不错。

var drawArrow=function(ctx,x1,y1,x2,y2,style,which,angle,d)

{

//设置一些缺省值

'use strict';

canvas 箭头_canvas 画箭头_canvas 画箭头

if(typeof(x1)=='string') x1=parseInt(x1,10);

if(typeof(y1)=='string') y1=parseInt(y1,10);

if(typeof(x2)=='string') x2=parseInt(x2,10);

if(typeof(y2)=='string') y2=parseInt(y2,10);

which=typeof(which)!='undefined'? which:1; // 终点绘制箭头

angle=typeof(angle)!='undefined'? angle:Math.PI/8;

d =typeof(d) !='undefined'? d :10;

style=typeof(style)!='undefined'? style:3;

// 缺省用drawHead绘制头部如果style参数是function，就用function代替

var toDrawHead=typeof(style)!='function'?drawHead:style;

（对于每个可以有默认值的参数，我们检查它们是否已设置，如果是，我们使用它们的值。如果没有，我们将它们设置为默认值。另外，对于样式，我们检查它是否是一个函数。如果是这样，我们使用它来为我们的函数绘制头，否则我们使用我们的函数drawHead。我不打算谈论drawHead，因为它只是画布绘制例程的简单应用程序，但你可以自己查看它，它是在canvasutilities.js而是，我将向你展示如何编写自己的头部绘图常规传入。）

var headDrawer=function(ctx,x0,y0,x1,y1,x2,y2,style)

{

var radius=3;

var twoPI=2*Math.PI;

ctx.save();

ctx.beginPath();

ctx.arc(x0,y0,radius,0,twoPI,false);

ctx.stroke();

ctx.beginPath();

ctx.arc(x1,y1,radius,0,twoPI,false);

ctx.stroke();

ctx.beginPath();

ctx.arc(x2,y2,radius,0,twoPI,false);

ctx.stroke();

ctx.restore();

}

（关于这一点很少说，它只是在每个点画一个圆圈。您可以像drawArrow（x1，y1，x2，y2，headDrawer）一样使用它（假设您默认选择哪个结束，长度和角度）。您可以在下面的愚蠢移动图中看到它正在使用中。如果你看到大的黑暗的东西，那是因为随机值的那个头的大小随机变得非常大。头部侧面与轴之间的随机角度也可能大于90度。如果你等待它会随机变小，或者角度会随机变小，或者你可以刷新以获得较小的起始值。）

image.png

对弧进行相同的操作

canvas 箭头_canvas 画箭头_canvas 画箭头

我们已经解决了所有问题，只需要找出传递给头部绘制方法的参数。要指出正确的方法，我们需要知道弧的末端所产生的角度。那是该点曲线的瞬时斜率。如果你有第一学期的微积分，你知道你可以从圆的等式的一阶导数得到它。以（a，b）为中心的圆的每个点满足等式 (x-a)2 + (y-b)2 = r2（平方）

推导出 2(x-a)+2(y-b)dy/dx=0.

推导出 dy/dx=(a-x)/(y-b)

请注意，带有x的部分位于顶部，即使我们通常在一条线上预期斜率是y的变化除以x的变化。没关系。数学不是谎言。稍后我们将调用atan2来获取角度，并且我们将从这个微积分应用中得到的这些值传递给它。谁说没有人需要微积分！

lineangle=Math.atan2(x-sx,sy-y)

在这种情况下，（x，y）将是中心，（sx，sy）将是弧上的终点。 atan2返回与（sx，sy）处的弧相切的线的角度。所以给定弧线，如果我们能够找出终点，我们应该很容易找出指向箭头的方向。我们将得到这样一个弧：

drawArcedArrow(ctx,x,y,r,startangle,endangle,anticlockwise,style,which)

ctx - 第二个绘图上下文

x，y - 弧所属圆的中心

r - 圆的半径

startangle - 弧开始的角度

endangle - 弧端的角度

anticlockwise - 如果逆时针绘制弧，则为布尔值true

style - 箭头的样式，如上面的drawArrow

which - 哪一端获得箭头，如上面的drawArrow

image.png

图（1），托圈下部圈弧有点像v形，不过它的圈内外侧都有一定的过渡段，也就是线条不完全像v的下部那么“窄”，这使它既能有较高的贴体度，也有与身体相近的弧线。 * 2、绘制圆弧(主要分为：绘制填充圆弧和绘制圆弧边框利用isfill变量来标记,注意：在绘制圆弧边框的时候还有一种特殊情况就是，只需要仅仅绘制弧边，不需要绘制圆弧开始起点和终点之间的连线，这个就是调用了beginpath()不需要调用closepath(),这里也使用一个isonlyarc变量来标记true为仅仅绘制弧边。 //把路径移动到画布中的指定点，不创建线条，注意：绘制扇形唯一与绘制弧的区别在于，紧跟着beginpath()后面调用，首先将路径移动到圆心位置。

strokeStyle='rgba(0,0,0,0)';