Javascript 使用Konva验证HTML数字输入中的值_Javascript_Html_Konvajs

Javascript 使用Konva验证HTML数字输入中的值

javascript html

Javascript 使用Konva验证HTML数字输入中的值,javascript,html,konvajs,Javascript,Html,Konvajs,我正在开发一个可以使用konva绘制图形的网站，但我目前遇到了一个奇怪的问题：如果我将每个刻度的单位更改为除*.5或整数以外的任何值，它将变成如下所示：代码如下： var stage，axeslayer，gridslayer，axes，grids，errTxt； var w，h；变量linex，liney；变量centx，centy；变量maxx，maxy，miny；变量x，y；变种distx，disty； varⅠ，j； var-tg=1，err=0； document.ge

我正在开发一个可以使用konva绘制图形的网站，但我目前遇到了一个奇怪的问题：

如果我将每个刻度的单位更改为除

*.5

或整数以外的任何值，它将变成如下所示：

代码如下：

var stage，axeslayer，gridslayer，axes，grids，errTxt；
var w，h；
变量linex，liney；
变量centx，centy；
变量maxx，maxy，miny；
变量x，y；
变种distx，disty；
varⅠ，j；
var-tg=1，err=0；
document.getElementById（'togG'）。disabled=true；//禁用按钮切换网格
函数绘图（）{
getValues（）；//从输入框中获取值
createStage（）；//创建阶段
验证（）；
如果（错误===0）{
drawAxes（）；//绘制轴
drawGrids（）；//绘制网格
}否则{
displayErr（）；//验证失败时显示错误消息
}
}
函数getValues（）{
w=parseFloat（document.getElementById（'w'）.value）；//获取Konva的值。Stage width，转换为float
h=parseFloat（document.getElementById（'h'）.value）；//获取Konva的值。舞台高度，转换为float
maxy=parseFloat（document.getElementById（'by'）.value）；//获取最大y数的值，转换为float
miny=parseFloat（document.getElementById（'sy'）.value）；//获取最小y数的值，转换为float
upty=parseFloat（document.getElementById（'upty'）.value）；//获取y轴每刻度的单位值，转换为float
maxx=parseFloat（document.getElementById（'bx'）.value）；//获取最大x数的值，转换为float
minx=parseFloat（document.getElementById（'sx'）.value）；//获取最小x数的值，转换为float
uptx=parseFloat（document.getElementById（'uptx'）.value）；//获取x轴每刻度的单位值，转换为float
}
函数验证（）{
if（minx<0 | | upty maxx-minx）{
误差=1；
}否则{
误差=0；
}
}
函数createStage（）{
舞台=新康瓦舞台({
容器：'容器'，
宽度：w，
身高：h
});
}
函数drawAxes（）{
axeslayer=新的Konva.Layer（）；
轴=新Konva.形状({
sceneFunc:函数（ctx）{
linex=stage.getWidth（）-70；//x轴的长度
liney=stage.getHeight（）-40；//y轴的长度
//计算x轴上的元素数
j=0；
对于（x=minx；x，这是因为Javascript浮点分割。您只需将“y”轴标签转换为固定：
 ctx.fillText(y.toFixed(1), 0, posy);


这些问题可能会帮助您：



只是插一句，如果你制作一个JSBin/JSFIDLE，对贡献者来说会容易得多！谢谢你的建议，我会在JSFIDLE开始工作后立即编辑它（这是一个新的功能），JSFIDLE由于某种原因似乎不起作用，所以我添加了一个到codepen的链接。io@ItsTheWolf这是正确的答案，您应该将其标记为：对不起，这几天我一直很忙：D谢谢你的回答，这真的很管用！
<body>
    <table width="100%">
        <tr>
            <td width="25%">Width : <input type="number" id="w" value ="500"/></td>
            <td width="25%">Height : <input type="number" id="h" value ="200"/></td>
            <td width="25%"></td>
            <td width="25%"></td>
        </tr>
        <tr>
            <td width="25%">Max y : <input type="number" id="by" value ="2.5"/></td>
            <td width="25%">Min y : <input type="number" id="sy" value ="-0.5"/></td>
            <td width="25%">Unit per ticks y : <input type="number" id="upty" value ="0.5"/></td>
            <td width="25%"></td>
        </tr>
        <tr>
            <td width="25%">Max x : <input type="number" id="bx" value ="400"/></td>
            <td width="25%">Min x : <input type="number" id="sx" value ="0" min="0"/></td>
            <td width="25%">Unit per ticks x : <input type="number" id="uptx" value ="100"/></td>
            <td width="25%"><button onclick="draw();">Change</button><br/></td>
        </tr>
    </table>
    <div id="container"></div>
    <button onclick="toggleGrids();" id="togG" disabled>Toggle Grid</button><br/>
</body>

 ctx.fillText(y.toFixed(1), 0, posy);