尝试更改画布中的字体大小和颜色时出现问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了尝试更改画布中的字体大小和颜色时出现问题相关的知识,希望对你有一定的参考价值。

我正在尝试在照片上更改我的画布中的字体大小和颜色。因此,您必须先上传照片,然后才能向图像添加文字。添加照片并添加文本后,您就可以更改颜色和字体,但尝试这样做时,您必须重新提交或不应用更改。关于发生了什么的任何想法?更改颜色或字体大小时是否需要重新绘制?提前致谢。

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input id="theText" type="text">
<button id="submit">Draw text on canvas</button>
<br>



<canvas id="canvas" width="1000" height="500" class="playable-canvas"></canvas>


<div id="image_div">
  <h1> Choose an Image to Upload </h1>
  <input type='file' name='img' id='uploadimage' />

</div>



<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.filter = 'blur(0px)';
</textarea>





<!-- Change Font Size --> 

<div class="radio">
  <input type="radio" name="radio" id="size16" onclick="size16()" checked="">
  <label for="size16"> Font Size 16  </label>
</div>
<div class="radio">
  <input type="radio" name="radio"  id="size20" onclick="size20()" >
  <label for="size20"> Font Size 20  </label>
</div>
<div class="radio">
  <input type="radio" name="radio"  id="size25" onclick="size25()" >
  <label for="size25"> Font Size 25  </label>
</div>
<div class="radio">
  <input type="radio" name="radio"id="size30" onclick="size30()" >
  <label for="size30"> Font Size 30</label>
</div>
<div class="radio">
  <input type="radio" name="radio" id="size35" onclick="size35()" >
  <label for="size35"> Font Size 35 </label>
</div>
<div class="radio">
  <input type="radio" name="radio" id="size40" onclick="size40()" >
  <label for="size40"> Font Size 40 </label>
</div>
<div class="radio">
  <input type="radio" name="radio" id="size45" onclick="siz45()" >
  <label for="size45"> Font Size 45 </label>
</div>
<div class="radio">
  <input type="radio" name="radio" id="size50" onclick="size50()" >
  <label for="size50"> Font Size 50 </label>
</div>

<Br> 

<!-- Change Color on Text --> 


<div class="col-lg-2 col-md-2 col-xs-12">

<div class="radio">
  <input type="radio" name="radio"  id="black" onclick="BlackText()" checked="">
  <label for="radio1"> Black  </label>
</div>
<div class="radio">
  <input type="radio" name="radio"  id="white" onclick="WhiteText()"  >
  <label for="radio1"> White  </label>
</div>
<div class="radio">
  <input type="radio" name="radio"  id="yellow" onclick="YellowText()"  >
  <label for="radio1"> Yellow  </label>
</div>
<div class="radio radio-primary">
  <input type="radio" name="radio" id="blue" onclick="BlueText()" >
  <label for="radio3"> Blue </label>
</div>
<div class="radio radio-success">
  <input type="radio" name="radio" id="green" onclick="GreenText()" >
  <label for="radio4"> Green </label>
</div>
<div class="radio radio-danger">
  <input type="radio" name="radio"id="red" onclick="RedText()"  >
  <label for="radio6"> Red </label>
</div>
<div class="radio radio-warning">
  <input type="radio" name="radio" id="orange" onclick="OrangeText()"  >
  <label for="radio7"> Orange </label>
</div>
<div class="radio radio-purple">
  <input type="radio" name="radio"id="purple" onclick="PurpleText()"  >
  <label for="radio8"> Purple </label>
</div>
</div>

javascript的:

//===========================================================================================================================
// Javascript that loads Image into canvas
//===========================================================================================================================


var drawnImage;

function drawImage(ev) {
  console.log(ev);
  var ctx = document.getElementById('canvas').getContext('2d'),
    img = new Image(),
    f = document.getElementById("uploadimage").files[0],
    url = window.URL || window.webkitURL,
    src = url.createObjectURL(f);
  img.src = src;
  img.onload = function() {
    drawnImage = img;
    ctx.drawImage(img, 0, 0);
    url.revokeObjectURL(src);
  }
}
document.getElementById("uploadimage").addEventListener("change", drawImage, false);

//===========================================================================================================================
// Javascript for input in textbox
//===========================================================================================================================

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
  drawImage();
}

reset.addEventListener('click', function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener('click', function() {
  textarea.focus();
})

textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);

//===========================================================================================================================
// Javascript for Moving Text around.
//===========================================================================================================================

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();
var startX;
var startY;
var texts = [];
var selectedText = -1;

function draw() {
  ctx.rect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < texts.length; i++) {
    var text = texts[i];
//    ctx.fillStyle = "blue";
    ctx.fillText(text.text, text.x, text.y);
  }
}

function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(drawnImage, 0, 0);
  draw();
}

function textHittest(x, y, textIndex) {
  var text = texts[textIndex];
  return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y);
}

function handleMouseDown(e) {
  e.preventDefault();
  startX = parseInt(e.clientX - offsetX);
  startY = parseInt(e.clientY - offsetY);

  for (var i = 0; i < texts.length; i++) {
    if (textHittest(startX, startY, i)) {
      selectedText = i;
    }
  }
}
function handleMouseUp(e) {
  e.preventDefault();
  selectedText = -1;
}

function handleMouseOut(e) {
  e.preventDefault();
  selectedText = -1;
}

function handleMouseMove(e) {
  if (selectedText < 0) {
    return;
  }
  e.preventDefault();
  mouseX = parseInt(e.clientX - offsetX);
  mouseY = parseInt(e.clientY - offsetY);

  var dx = mouseX - startX;
  var dy = mouseY - startY;
  startX = mouseX;
  startY = mouseY;
  var text = texts[selectedText];
  text.x += dx;
  text.y += dy;
  redraw();
}
$("#canvas").mousedown(function(e) {
  handleMouseDown(e);
});
$("#canvas").mousemove(function(e) {
  handleMouseMove(e);
});
$("#canvas").mouseup(function(e) {
  handleMouseUp(e);
});
$("#canvas").mouseout(function(e) {
  handleMouseOut(e);
});

$("#submit").click(function() {
  var y = texts.length * 20 + 20;
  var text = {
    text: $("#theText").val(),
    x: 20,
    y: y
  };
//  ctx.font = "16px verdana";
  text.width = ctx.measureText(text.text).width;
  text.height = 16;
  texts.push(text);
  draw();
});
//===========================================================================================================================
// Javascript for Text Size :)
//===========================================================================================================================

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function size16 () {
    ctx.font = "16px verdana";
}
function size20 () {
    ctx.font = "20px verdana";
}
function size25 () {
    ctx.font = "25px verdana";
}
function size30 () {
    ctx.font = "30px verdana";
}
function size35 () {
    ctx.font = "35px verdana";
}
function size40 () {
    ctx.font = "40px verdana";
}
function size45 () {
    ctx.font = "45px verdana";
}
function size50 () {
    ctx.font = "50px verdana";
}




//===========================================================================================================================
// Javascript for Drop down for Text Color :)
//===========================================================================================================================

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function PurpleText () {
    ctx.fillStyle= 'purple';
}
function BlackText () {
    ctx.fillStyle= 'black';
}
function YellowText () {
    ctx.fillStyle= 'yellow';
}
function OrangeText () {
 ctx.fillStyle = "orange";
}
function BlueText () {
    ctx.fillStyle= 'blue';
}
function WhiteText () {
 ctx.fillStyle = "white";
}

 function GreenText () {
     ctx.fillStyle= 'green';
 }
 function RedText () {
  ctx.fillStyle = "red";
 }
答案

您要么再次绘制canvans,要么每xxx毫秒连续绘制(刷新)它。

以上是关于尝试更改画布中的字体大小和颜色时出现问题的主要内容,如果未能解决你的问题,请参考以下文章

如何使用R中的绘图功能更改散点图中x轴和y轴标签的字体大小和颜色?

UILabel 颜色和字体大小从 XIB 更改

如何在 Eclipse-PyDev 中更改控制台字体大小

PyCharm设置字体大小与颜色

尝试访问 Kotlin 片段中的视图时出现 NullPointerException

以另一种颜色更改选择选项时出现问题[重复]