用厚底和薄顶针 - 尖针画一条线

Question

我遇到了问题：我需要在车速表上画针。我在JS中使用简单的线函数来绘制线/针。我希望我的针头从底部变厚，从尖端变薄，如下图所示。请告知如何在JavaScript中绘制这样的针。所需和当前的针头在下面。

行代码：

function drawNeedle(options) {
/* Draw the needle  at the
* angle that represents the options.speed value.
*/

var iSpeedAsAngle = convertSpeedToAngle(options),
    iSpeedAsAngleRad = degToRad(iSpeedAsAngle),
    gaugeOptions = options.gaugeOptions,
    innerTickX = gaugeOptions.radius - (Math.cos(iSpeedAsAngleRad) * 10),
    innerTickY = gaugeOptions.radius - (Math.sin(iSpeedAsAngleRad) * 10),
    fromX = (options.center.X - gaugeOptions.radius) + innerTickX,//+ innerTickX ,// /2,
    fromY = (gaugeOptions.center.Y - gaugeOptions.radius) + innerTickY ,//+ innerTickY, // /2,
    endNeedleX = gaugeOptions.radius - (Math.cos(iSpeedAsAngleRad) * gaugeOptions.radius),//+40,
    endNeedleY = gaugeOptions.radius - (Math.sin(iSpeedAsAngleRad) * gaugeOptions.radius),//+60, // controlled height of nedle
    toX = (options.center.X - gaugeOptions.radius) + endNeedleX,
    toY = (gaugeOptions.center.Y - gaugeOptions.radius) + endNeedleY,

   line = createLine(options.center.X + 80, options.center.Y + 60, toX+75, toY+60, "rgb(3,2,245)", 5, 0.6);  //80.60.75.65

// line = createLine(fromX, fromY, toX, toY, "rgb(3,2,245)", 5, 0.6);

drawLine(options, line);

}

drawLine功能

function drawLine(options, line) {

// Draw a line using the line object passed in
options.ctx.beginPath();

// Set attributes of open
options.ctx.globalAlpha = line.alpha;
options.ctx.lineWidth = line.lineWidth;
options.ctx.fillStyle = line.fillStyle;
options.ctx.strokeStyle = line.fillStyle;
options.ctx.moveTo(line.from.X,
    line.from.Y);

// Plot the line
options.ctx.lineTo(
    (line.to.X),
    line.to.Y
);

options.ctx.stroke();

}

Answer 1

以下是如何绘制针头的方法：

• 转换到测量中心，
• 旋转到指定角度
• 将针头画成三角形，
• 以相同的指定角度旋转
• 按中心坐标取消翻译。

示例代码和演示：

＆＃13;

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var degrees=-90;
var radians=degrees*Math.PI/180;

$myslider=$('#myslider');
$myslider.attr({min:-180,max:0}).val(degrees);
$myslider.on('input change',function(){
    var degrees=parseInt($(this).val());
    var radians=degrees*Math.PI/180;
    drawNeedle(cw/2,ch/2,150,radians);
});

drawNeedle(cw/2,ch/2,150,radians);

function drawNeedle(cx,cy,radius,radianAngle){
    ctx.clearRect(0,0,cw,ch);
    ctx.translate(cx,cy);
    ctx.rotate(radianAngle);
    ctx.beginPath();
    ctx.moveTo(0,-5);
    ctx.lineTo(radius,0);
    ctx.lineTo(0,5);
    ctx.fillStyle='blue';
    ctx.fill();
    ctx.rotate(-radianAngle);
    ctx.translate(-cx,-cy);
    ctx.beginPath();
    ctx.arc(cx,cy,10,0,Math.PI*2);
    ctx.fill();
}

＆＃13;

body{ background-color:white; }
#canvas{border:1px solid red; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Needle angle&nbsp <input id=myslider type=range><br>
<canvas id="canvas" width=512 height=512></canvas>

＆＃13;

＆＃13;

＆＃13;