Draw a Line with Thick Base and Thin Top -Speedometer Needle

BASEER ULHASSAN Published at Dev

BASEER ULHASSAN

I am having a problem: I need to draw a Needle over a Speedometer. I am using simple Line Function in JS that draws a line/Needle. I want my Needle to be thick from base and thin from tip as shown below. Please advise how to draw such needle in JavaScript. The Desired and Current Needles are below.

Code of Line:

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

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();

}

markE

Here's how to draw a needle guage:

Translate to the center of the guage,
Rotate to a specified angle,
Draw the needle as a triangle,
Un-rotate by the same specified angle,
Un-translate by the center coordinates.

Example code and a Demo:

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();
}

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

<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>

Collected from the Internet

Please contact [email protected] to delete if infringement.