javascript - 退格时从输入文本动态增加字体大小

Question

在我的代码中，我有一个 Canvas ，可以在其中输入 2 行文本。当我写作时，文本适合 Canvas (字体大小正在减小)，而且我还可以更改它的颜色。因此，当我写入文本输入时，文本大小正在减小，但如果我退格，它不会恢复到原来的大小。有人可以帮我解决这个问题吗？我尝试添加另一个 if (width < 100)，并将 int 更改为 +1 但它不起作用。这是 JSFiddle 代码:https://jsfiddle.net/dk54jb06/8/ .

var canvas2 = document.getElementById("canvas2");
var ctx2 = canvas2.getContext("2d");
var selectedTextFont = "Arial Black";
var selectedFontSize = "20px";
var selectedFontStyle = "bold";
var selectedFontColor = "#000000";

$('#nametag').bind('change keyup input', redrawTextsCan2);
$('#line2').bind('click', redrawTextsCan2);
$('#line3').bind('click', redrawTextsCan2);

function redrawTextsCan2() {

  ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
  ctx2.textAlign = "center";

  ctx2.font = selectedFontStyle + " " + selectedFontSize + " " + selectedTextFont;
  ctx2.fillStyle = selectedFontColor;

  var width = ctx2.measureText($('#line1').val()).width;

  if (width > 100) {
    var selectedFontSizeInt = (selectedFontSize.replace(/(^\d+)(.+$)/i,'$1') - 1);
    selectedFontSize = '' + selectedFontSizeInt + "px";
    ctx2.font = selectedFontStyle + " " + selectedFontSize + " " + selectedTextFont;
  }
  
  ctx2.fillText($('#line1').val().toUpperCase(), canvas2.width * 0.5, 20);
}

function color2(v4) {
  v4 = v4.dataset.id;
  switch (v4) {
    // top: 103px; left: 210px

    case "black":
      selectedFontColor = '#000000';
      break;

    case "red":
      selectedFontColor = "#ff0000";
      break;

    case "green":
      selectedFontColor = "#009933";
      break;

    case "orange":
      selectedFontColor = "#ff9900";
      break;
  }
  redrawTextsCan2();
}

function chfont3(v3) {
  switch (v3) {
    // top: 103px; left: 210px
    case "arial":
      selectedTextFont = "Arial Black";
      break;

    case "comic":
      selectedTextFont = "Comic Sans MS";
      break;

    case "lucida":
      selectedTextFont = "Lucida Sans";
      break;

    case "franklin":
      selectedTextFont = "Franklin Gothic";
      break;

    case "impact":
      selectedTextFont = "Impact";
      break;
  }
  redrawTextsCan2();
}

#canvas2 {
  border: 2px dotted black;
  border-radius: 5px;
  position: absolute;
}

#canvas3 {
  border: 2px dotted black;
  border-radius: 5px;
  position: absolute;
  top: 220px;
}

#canvas4 {
  border: 2px dotted black;
  border-radius: 5px;
  position: absolute;
}

.green {
  border: 0.1px solid #CCC;
  margin: 1px;
  zoom: 3;
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  width: 22.5px;
  height: 20px;
  background-color: #009933;
}

.green:hover,
.green:active,
.green:focus {
  border: 1px solid black;
  box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
  opacity: 0.7;
  text-decoration: none;
  text-shadow: -1px -1px 0 #136a65;
  -webkit-transition: all 250ms linear;
  transition: all 250ms linear;
}

.red {
  border: 0.1px solid #CCC;
  margin: 1px;
  zoom: 3;
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  width: 22.5px;
  height: 20px;
  background-color: #ff0000;
}

.red:hover,
.red:active,
.red:focus {
  border: 1px solid black;
  box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
  opacity: 0.7;
  text-decoration: none;
  text-shadow: -1px -1px 0 #136a65;
  -webkit-transition: all 250ms linear;
  transition: all 250ms linear;
}

.black {
  border: 0.1px solid #CCC;
  margin: 1px;
  zoom: 3;
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  width: 22.5px;
  height: 20px;
  background-color: black;
}

.black:hover,
.black:active,
.black:focus {
  border: 1px solid black;
  box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
  opacity: 0.7;
  text-decoration: none;
  text-shadow: -1px -1px 0 #136a65;
  -webkit-transition: all 250ms linear;
  transition: all 250ms linear;
}

.orange {
  border: 0.1px solid #CCC;
  margin: 1px;
  zoom: 3;
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  width: 22.5px;
  height: 20px;
  background-color: orange;
}

.orange:hover,
.orange:active,
.orange:focus {
  border: 1px solid black;
  box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
  opacity: 0.7;
  text-decoration: none;
  text-shadow: -1px -1px 0 #136a65;
  -webkit-transition: all 250ms linear;
  transition: all 250ms linear;
}

@font-face {
  font-family: 'MyFont';
  src: url('https://cdn.rawgit.com/lxc698/CustomizePanel/3817e8da/Standard-Regular.ttf');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 style="font-size: 15px;padding-top: 0px">Choose Colour</h3>

<button type="button" class="black" data-id="black" onclick="color2(this)"></button>
<button type="button" class="red" data-id="red" onclick="color2(this)"></button>
<button type="button" class="green" data-id="green" onclick="color2(this)"></button>
<button type="button" class="orange" data-id="orange" onclick="color2(this)"></button>
<br>
<br>
<select name="Font" onchange="chfont3(this.value)">
  <option value="arial" selected="selected" style="font-family: Arial Black">ARIAL</option>
  <option value="comic" style="font-family: Comic Sans MS">COMIC SANS MS</option>
  <option value="lucida" style="font-family: Lucida Sans">LUCIDA SANS</option>
  <option value="franklin" style="font-family: Franklin Gothic">FRANKLIN GOTHIC</option>
  <option value="impact" style="font-family: Impact">IMPACT</option>
</select>

<br>
<br>
<form action="" method="POST" id="nametag" class="nametag">
  Line1:
  <input type="text" id="line1" maxlength="22" name="line1" style="width:250px;" />
  <br> Line2:
  <input type="text" id="line2" maxlength="22" name="line1" style="width:250px;" />
  <br>
  <br>
  <canvas width="130px" height="80px" id="canvas2"></canvas>

Answer 1

您可以使用e.key属性。

Documentation

这里传递事件。

redrawTextsCan2(e) {
    if (e.key === 'Backspace') {
        //Calculate the font size.
    }
}