如何将标签放在量规JS之外

Question

我遇到一个问题，我创建了自定义量规，但是我想在此量规之外显示带有值的标签。

对于创建量规，我使用：gauge.min.js

因此，我想用％的数字表示外部规格值。

我的代码：

html：

  <canvas id="gauge"></canvas>
            <span id="gauge1-txt"></span>
            <div class="gaugeData">   
                <h1>Efficency</h1>
                <h1 id="eff"></h1>
                <input type="number" id="number" />
            </div>
            <button onclick="changeData()">test</button>

JS：

let canvas = document.getElementById('gauge');
let context = canvas.getContext('2d');
let lowerBadLimit = 50;
let loweAcceptLimit = 70;
let lowerGoodLimit = 85;
let nominalValue = 100;
let upperGoodLimit = 110;
let upperAcceptLimit = 120;
let upperBaadLimit = 150;
var globalValues = [];
var gaugeStart = 0;
var gaugeEnd = 100;
var inputValue = 150;
var poinenetValue = 0;


function drawGaugeSegment(canvas, context, x, y, beginPercent, endPercent, color) {
    let beginAngle = Math.PI + (Math.PI * (beginPercent / 100));
    let endAngle = 0 - (Math.PI * (1 - endPercent / 100));

    context.strokeStyle = color;
    context.lineWidth = 60;

    context.beginPath();
    context.arc(x, y, 170, beginAngle, endAngle);
    context.stroke();
}

function drawNeedle(canvas, context, x, y, percent, color) {
    context.fillStyle = color;
    context.translate(x, y);
    context.rotate(Math.PI * percent / 100 - Math.PI / 2);

    let needleWidth = 15;
    let needleLength = 130;

    context.beginPath();
    context.arc(0, 0, needleWidth / 2, 0, Math.PI);
    context.moveTo(0 - needleWidth / 2, 0);
    context.lineTo(0, 0 - needleLength);
    context.lineTo(needleWidth / 2, 0);
    context.lineTo(0 - needleWidth / 2, 0)
    context.fill();

}


function drawGauge(canvas, context, x, y) {
    drawGaugeSegment(canvas, context, x, y, gaugeStart, globalValues[0] - 1, '#FF6363');
    drawGaugeSegment(canvas, context, x, y, globalValues[0], globalValues[1] - 1, '#FEF567');
    drawGaugeSegment(canvas, context, x, y, globalValues[1], globalValues[2] - 1, '#70FE67');
    drawGaugeSegment(canvas, context, x, y, globalValues[2], globalValues[3] - 1, '#70FE67');
    drawGaugeSegment(canvas, context, x, y, globalValues[3], globalValues[4] - 1, '#FEF567');
    drawGaugeSegment(canvas, context, x, y, globalValues[4], gaugeEnd, '#FF6363');

    drawNeedle(canvas, context, x, y, poinenetValue, '#fff');
}

function gaugeCalc() {
    var valueRange = upperBaadLimit - lowerBadLimit;
    var gaugeRange = gaugeEnd - gaugeStart;
    var scale = gaugeRange / valueRange;
    var gaugeZone1 = (loweAcceptLimit - lowerBadLimit) * scale;
    var gaugeZone2 = (lowerGoodLimit - lowerBadLimit) * scale;
    var gaugeZone3 = (nominalValue - lowerBadLimit) * scale;
    var gaugeZone4 = (upperGoodLimit - lowerBadLimit) * scale;
    var gaugeZone5 = (upperAcceptLimit - lowerBadLimit) * scale;

    var values = [gaugeZone1, gaugeZone2, gaugeZone3, gaugeZone4, gaugeZone5];

    globalValues = values;

var convertedValue = (getValue() - lowerBadLimit) * scale;

            if (convertedValue < gaugeStart) {
                poinenetValue = gaugeStart;
                console.log(poinenetValue);
            } else if (convertedValue > gaugeEnd) {
                poinenetValue = gaugeEnd;
                console.log(poinenetValue);
            } else {
                poinenetValue = convertedValue;
                console.log(poinenetValue);

            }
        }

function getValue(val) {
            val = $('#number').val();
            return val;
        }

function changeData() {
            gaugeCalc();
            draw()
            changeEffValue()
        }

function changeEffValue() {
            document.getElementById('eff').innerHTML = getValue() + ' %';
        }


 function draw() {
            canvas.width = 550;
            canvas.height = 250;
            drawGauge(canvas, context, 260, 225);
        }


        gaugeCalc()
        draw();

有些例子，现在我有：

example

我想要这样的价值观：

example

因此，如您所见，在我的代码中，我没有标准的可能性在侧规之外添加标签。

Answer 1

您可以直接在画布中包含文本（请参见MDN docs）。

例如，在drawGaugeSegment中，您已经具有量规的中心，角度，只需要一些数学即可。

在这里，我将215作为显示文本的圆的半径，- 6和+ 3的固定调整很小，因为fillText的x / y是文本的一个角，而不是中心（值可能会根据字体大小/文本长度而变化）

给出context.fillText(endPercent, x - 6 + parseInt(Math.cos(endAngle) * 215), y + 3 + parseInt(Math.sin(endAngle) * 215));

let canvas = document.getElementById('gauge');
let context = canvas.getContext('2d');
let lowerBadLimit = 50;
let loweAcceptLimit = 70;
let lowerGoodLimit = 85;
let nominalValue = 100;
let upperGoodLimit = 110;
let upperAcceptLimit = 120;
let upperBaadLimit = 150;
var globalValues = [];
var gaugeStart = 0;
var gaugeEnd = 100;
var inputValue = 150;
var poinenetValue = 0;


function drawGaugeSegment(canvas, context, x, y, beginPercent, endPercent, color, text) {
    let beginAngle = Math.PI + (Math.PI * (beginPercent / 100));
    let endAngle = 0 - (Math.PI * (1 - endPercent / 100));

    context.strokeStyle = color;
    context.lineWidth = 60;

    context.beginPath();
    context.arc(x, y, 170, beginAngle, endAngle);
    context.stroke();
    
    context.fillText(text, x - 6 + parseInt(Math.cos(endAngle) * 215), y + 3 + parseInt(Math.sin(endAngle) * 215));
}

function drawNeedle(canvas, context, x, y, percent, color) {
    context.fillStyle = color;
    context.translate(x, y);
    context.rotate(Math.PI * percent / 100 - Math.PI / 2);

    let needleWidth = 15;
    let needleLength = 130;

    context.beginPath();
    context.arc(0, 0, needleWidth / 2, 0, Math.PI);
    context.moveTo(0 - needleWidth / 2, 0);
    context.lineTo(0, 0 - needleLength);
    context.lineTo(needleWidth / 2, 0);
    context.lineTo(0 - needleWidth / 2, 0)
    context.fill();

}


function drawGauge(canvas, context, x, y) {
    drawGaugeSegment(canvas, context, x, y, gaugeStart, globalValues[0] - 1, '#FF6363', 'test');
    drawGaugeSegment(canvas, context, x, y, globalValues[0], globalValues[1] - 1, '#FEF567', globalValues[1]);
    drawGaugeSegment(canvas, context, x, y, globalValues[1], globalValues[2] - 1, '#70FE67', globalValues[2]);
    drawGaugeSegment(canvas, context, x, y, globalValues[2], globalValues[3] - 1, '#70FE67', globalValues[3]);
    drawGaugeSegment(canvas, context, x, y, globalValues[3], globalValues[4] - 1, '#FEF567', globalValues[4]);
    drawGaugeSegment(canvas, context, x, y, globalValues[4], gaugeEnd, '#FF6363', gaugeEnd);

    drawNeedle(canvas, context, x, y, poinenetValue, '#fff');
}

function gaugeCalc() {
    var valueRange = upperBaadLimit - lowerBadLimit;
    var gaugeRange = gaugeEnd - gaugeStart;
    var scale = gaugeRange / valueRange;
    var gaugeZone1 = (loweAcceptLimit - lowerBadLimit) * scale;
    var gaugeZone2 = (lowerGoodLimit - lowerBadLimit) * scale;
    var gaugeZone3 = (nominalValue - lowerBadLimit) * scale;
    var gaugeZone4 = (upperGoodLimit - lowerBadLimit) * scale;
    var gaugeZone5 = (upperAcceptLimit - lowerBadLimit) * scale;

    var values = [gaugeZone1, gaugeZone2, gaugeZone3, gaugeZone4, gaugeZone5];

    globalValues = values;

var convertedValue = (getValue() - lowerBadLimit) * scale;

            if (convertedValue < gaugeStart) {
                poinenetValue = gaugeStart;
                console.log(poinenetValue);
            } else if (convertedValue > gaugeEnd) {
                poinenetValue = gaugeEnd;
                console.log(poinenetValue);
            } else {
                poinenetValue = convertedValue;
                console.log(poinenetValue);

            }
        }

function getValue(val) {
            val = $('#number').val();
            return val;
        }

function changeData() {
            gaugeCalc();
            draw()
            changeEffValue()
        }

function changeEffValue() {
            document.getElementById('eff').innerHTML = getValue() + ' %';
        }


 function draw() {
            canvas.width = 550;
            canvas.height = 250;
            drawGauge(canvas, context, 260, 225);
        }


        gaugeCalc()
        draw();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="gauge"></canvas>
            <span id="gauge1-txt"></span>
            <div class="gaugeData">   
                <h1>Efficency</h1>
                <h1 id="eff"></h1>
                <input type="number" id="number" />
            </div>
            <button onclick="changeData()">test</button>

编辑以自定义值，您只需添加一个text参数即可显示而不是百分比