个人中心
gpt4 book ai didi

javascript - jQuery 函数在第一次单击时部分触发，在第二次单击时起作用

转载 作者：行者123 更新时间：2023-12-02 23:41:01 27 4
gpt4 key购买 nike

我正在使用 canvas 元素生成文本的 Base64 图像。当我点击“生成文本”按钮时， Canvas 上会填充图像，但直到您再次点击该按钮后，它才会调整大小。第二次。 (奇怪的是，在我的机器上，我的字体直到第二次单击才起作用)

我的 Fiddle 如下，您可以看到该函数在第一次点击时部分工作，这就是让我困惑的地方。

我已检查答案 here , here ，和here已经，但我不是 jQuery 专家，我不知道如何将其中一些解决方案应用于我的具体案例。我已经尝试了上面答案中提出的一些解决方案，包括:

  • 将我的代码包装在 $(document).ready(function() {}

  • 使用 $("#addText").click 而不是 $("#addText").on("click"...

编辑:正如@Barmar 在评论中提到的，它在第一次尝试时调整到大约一半。这是因为 lineCount() 函数在第一次单击时输出了错误的数字。

$(document).ready(function() {

  $("#addText").click(txtimg);

  $("#myDownload").click(function() {
    var canvas = document.getElementById("myCanvas");
    var fullQuality = canvas.toDataURL("image/png", 1.0);
    $('#imgURL').val(fullQuality);
  });

  $("input[type='radio'][name='fontRadios']").click(function() {
    console.log($("input[type='radio'][name='fontRadios']:checked").val());
  });

  $("#colorChooser > label").on("click", function() {
    $('#colorPreview').css("background-color", $(this).attr('data-color')),
      txtimg();
  });

  $("#CaptureURL").click(function() {
    $("#imgURL").select();
    document.execCommand('copy');
  });

});

function txtimg() {
  var fontSize = parseInt($('#fontSizeValue').html());
  var fontColor = $('#colorChooser > label > input:checked').attr('id');
  var fontFam = $("input[type='radio'][name='fontRadios']:checked").val();
  var canvas = document.getElementById("myCanvas");
  var myMessage = $("#myMessage").val();

  var maxWidth = 600;
  var lineHeight = parseInt($('#lineHeightValue').html());
  var ctx = canvas.getContext("2d");
  var canvHeight = lineHeight * lineCount(ctx, myMessage, maxWidth);
  canvas.height = lineHeight * lineCount(ctx, myMessage, maxWidth);

  var x = canvas.width / 2;
  var y = canvas.height;

  //ctx.clearRect(0, 0, canvas.width, canvas.height);


  //ctx.beginPath();
  //ctx.moveTo(x, 0);
  ctx.font = fontSize + "px " + fontFam;
  ctx.fillStyle = fontColor;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'bottom';
  ctx.imageSmoothingEnabled = true;
  ctx.imageSmoothingQuality = 'high';
  //ctx.fillText(myMessage, x, y);
  wrapText(ctx, myMessage, x, 0 + lineHeight, maxWidth, lineHeight);
}

function lineCount(context, text, maxWidth) {
  var words = text.split(' ');
  var line = '';
  var lines = 1;



  for (var n = 0; n < words.length; n++) {

    var testLine = line + words[n] + ' ';
    var metrics = context.measureText(testLine);
    var testWidth = metrics.width;




    if (testWidth > maxWidth && n > 0) {
      line = words[n] + ' ';
      lines++;

    } else {
      line = testLine;
    }
  }
  return lines;
}

function wrapText(context, text, x, y, maxWidth, lineHeight) {
  var words = text.split(' ');
  var line = '';

  for (var n = 0; n < words.length; n++) {
    var testLine = line + words[n] + ' ';
    var metrics = context.measureText(testLine);
    var testWidth = metrics.width;
    if (testWidth > maxWidth && n > 0) {
      context.fillText(line, x, y);
      line = words[n] + ' ';
      y += lineHeight;
    } else {
      line = testLine;
    }
  }
  context.fillText(line, x, y);
}

function fontVal(elem) {
  var fv = document.getElementById('fontSizeValue');
  if (fv.innerHTML != elem.value) {
    fv.innerHTML = elem.value;
    console.log(elem.value);
  }
}

function lineVal(elem) {
  var lv = document.getElementById('lineHeightValue');
  if (lv.innerHTML != elem.value) {
    lv.innerHTML = elem.value;
    console.log(elem.value);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Helloworld!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Sofia" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="d-flex flex-row align-content-center mb-5">
      <div class="d-flex align-self-center mx-auto">
        <canvas id="myCanvas" width="600" height="100" style="border: 1px solid #cecece;"></canvas>
      </div>
    </div>

    <form id="myForm">
      <div class="form-group">
        <label for="myMessage">Message</label>
        <input type="text" name="myMessage" id="myMessage" class="form-control" value="Did you ever hear the tragedy of Darth Plagueis the Wise? I thought not. It's not a story the Jedi would tell you. It's a Sith legend. Darth Plagueis was a Dark Lord of the Sith, so powerful and so wise he could use the Force to influence the midichlorians to create life... He had such a knowledge of the dark side that he could even keep the ones he cared about from dying. The dark side of the Force is a pathway to many abilities some consider to be unnatural. He became so powerful... the only thing he was afraid of was losing his power, which eventually, of course, he did. Unfortunately, he taught his apprentice everything he knew, then his apprentice killed him in his sleep. It's ironic he could save others from death, but not himself."
        />
      </div>
      <hr/>
      <div class="row">
        <div class="col-lg-6">
          <div class="form-group">
            <label for="fontRange">Font Size:&nbsp;</label><span id="fontSizeValue">32</span><span>px</span>
            <input type="range" class="form-control-range" id="fontRange" min="8" max="128" value="32" onChange="fontVal(this)" onMouseMove="fontVal(this)">
          </div>
        </div>
        <div class="col-lg-6">
          <div class="form-group">
            <label for="lineRange">Line Height</label><span id="lineHeightValue">32</span><span>px</span>
            <input type="range" class="form-control-range" id="lineRange" min="0" max="128" value="32" onChange="lineVal(this)" onMouseMove="lineVal(this)">
          </div>
        </div>
      </div>
      <hr/>
      <div class="row">
        <div class="col-lg-6">
          <div class="form-group">
            <label for="fontSizeSelect">Typeface</label>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="fontRadios" id="Oswald" value="Oswald" checked>
              <label class="form-check-label" for="WP">
									Oswald
								</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="fontRadios" id="Roboto" value="Roboto">
              <label class="form-check-label" for="TG">
									Roboto
								</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="fontRadios" id="Sofia" value="Sofia">
              <label class="form-check-label" for="TGB">
									Sofia
								</label>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="btn-group btn-group-toggle w-100" data-toggle="buttons" id="colorChooser">
            <label class="btn rush-red active" data-color="#ed1c24">
							<input type="radio" name="colorOptions" id="#ed1c24" autocomplete="off" checked>Red
							</label>
            <label class="btn rush-gold" data-color="#eeb111">
							<input type="radio" name="colorOptions" id="#eeb111" autocomplete="off">Gold
							</label>
            <label class="btn rush-grey" data-color="#505051">
							<input type="radio" name="colorOptions" id="#505051" autocomplete="off">Grey
							</label>
            <label class="btn rush-black" data-color="#111111">
							<input type="radio" name="colorOptions" id="#111111" autocomplete="off">Black
							</label>
          </div>
          <div class="card">
            <div id="colorPreview" class="card-body" style="background-color: #ed1c24;">

            </div>
          </div>
        </div>

      </div>

      <button id="addText" class="btn btn-primary" type="button">
					Add Text
				</button>
    </form>
    <hr/>
    <button class="btn btn-primary" type="button" id="myDownload">
				<i class="fa fa-code pr-2"></i>Generate Image URL
			</button>
    <button class="btn btn-primary" type="button" id="CaptureURL">
				<i class="fa fa-copy pr-2"></i>Copy
			</button>
    <!--a class="btn disabled float-right" id="linkURL" href="#" target="_blank">
				<i class="fa fa-external-link-alt pr-2"></i>Test in Browser
			</a-->

    <textarea id="imgURL" class="form-control"></textarea>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

</html>

最佳答案

在第一次调用 lineCount() 之前设置 Canvas 字体属性。对 measureText() 的内部调用使用分配它们之前的任何默认值。

关于javascript - jQuery 函数在第一次单击时部分触发，在第二次单击时起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56083059/

27 4 0
文章推荐： javascript - 在 typescript/javascript 中使用 fetch 读取 JSON
文章推荐： javascript - 当一个项目从带 Angular 子对象传递时获取父 ID
文章推荐： javascript - 'this' 在原型(prototype)中指什么？
文章推荐： javascript - 没有上传图片 "SRC"即使检查也未定义？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com