html5 -javascript画布圈自动半径
[英]html5 -javascript canvas circle automatic radius
问题描述
I'm working on html5/canvas online stamp creation project.my code is working good for displaying top circular and bottom circular text.i have problem displaying center text.its overlapping after you type 4 letters.and I also want to increase radius of circle(including top/bottom Texts) on type of Center Text..here is my Fidddle http://jsfiddle.net/apsvaeoa/ ..also find the attached screenshot. 
我正在研究html5 / canvas在线图章创建项目。我的代码可以很好地显示顶部圆形和底部圆形文本。我在显示中心文本时遇到问题。键入4个字母后重叠。并且我还想增加在“中心文本”类型上圈（包括顶部/底部文本）。这是我的摆弄http://jsfiddle.net/apsvaeoa/ ..还找到了随附的屏幕截图。 .
。
<!DOCTYPE HTML>
<html>
<head>
<style>
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<canvas id="canvas1" width="600" height="400" style="float:left;"></canvas>
<div style="float: left; width: 538px;">
<label style="padding-right: 51px;">Text-Top:</label>
<input type="text" id="text_cnv" size="40" maxlength="" />
<button id="text_cnv3" style="visibility:hidden">
Delete
</button>
<label style="padding-right: 32px;">Text-bottom:</label>
<input type="text" id="text_cnv2" size="40" maxlength="" />
<button id="text_cnv4" style="visibility:hidden">
Delete
</button>
<label style="padding-right: 32px;">Text-horizontal:</label>
<input type="text" id="text_horizontal"/>
</div>
<script>
var ctx = document.getElementById('canvas1').getContext('2d');
var r = 50;
var space = Math.PI / 12;
ctx.font = "bold 30px Courier";
document.getElementById('text_cnv').onkeyup = function() {
var textLength = (this.value.length);
if (textLength > 5) {
radiusChaninging = r + (textLength * 3);
} else {
radiusChaninging = r + (textLength);
}
textCircle(this.value, 150, 150, radiusChaninging, space, 1);
document.getElementById('text_cnv3').style.visibility = 'visible';
}
document.getElementById('text_cnv2').onkeyup = function() {
var textLength = (this.value.length);
if (textLength > 5) {
radiusChaninging = r + (textLength * 3);
} else {
radiusChaninging = r + (textLength);
}
textCircle(this.value, 150, 150, radiusChaninging, space);
document.getElementById('text_cnv4').style.visibility = 'visible';
}
document.getElementById('text_cnv3').onclick = function() {
textCircle('', 150, 150, 0, space, 1);
$("#text_cnv").val('');
}
document.getElementById('text_cnv4').onclick = function() {
textCircle('', 150, 150, 0, space);
$("#text_cnv2").val('');
}
function drawTextHorizontal(text, x, y,radius) {
ctx.font = "bold 30px Serif";
// ctx.textAlign = "center";
ctx.fillText(text, x, y,radius);
ctx.restore();
}
var x_pos = 90;
var y_pos = 150;
document.getElementById('text_horizontal').onkeyup = function() {
var nr_w = (this.value.length);
var textLength = (nr_w);
if (textLength > 5) {
radiusChaninging = r + (textLength * 2);
} else {
radiusChaninging = r + (textLength);
}
drawTextHorizontal(this.value, x_pos, y_pos,radiusChaninging);
}
function textCircle(text, x, y, radius, space, top) {
ctx.clearRect(0, ( top ? 0 : y), 600, y);
space = space || 0;
var numRadsPerLetter = (Math.PI - space * 2) / text.length;
ctx.save();
ctx.translate(x, y);
var k = (top) ? 1 : -1;
ctx.rotate(-k * ((Math.PI - numRadsPerLetter) / 2 - space));
for (var i = 0; i < text.length; i++) {
// alert(radius);
ctx.save();
ctx.rotate(k * i * (numRadsPerLetter));
ctx.textAlign = "center";
ctx.textBaseline = (!top) ? "top" : "bottom";
ctx.fillText(text[i], 0, -k * (radius));
ctx.restore();
}
ctx.restore();
}
</script>
</body>
1 个解决方案
解决方案1
0 2015-04-28 04:16:11
Well I got the below function from THIS SOURCE and I just wrapped it around into your function and it works!! 好吧，我从此源获得了以下功能，我只是将其包装到您的功能中，并且可以正常工作！ Now overlapping problem is not there! 现在没有重叠的问题！
This will be your drawTextHorizontal function 这将是您的drawTextHorizontal函数
function drawTextHorizontal(text, x, y,radius) {
ctx.font = "bold 30px Serif";
wrapText(ctx,text,x,y,4000,1); //call this
ctx.restore();
}
This is the wrapText function I got from above said source 这是我从上述来源获得的wrapText函数
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);
}
Here is your UPDATED FIDDLE 这是您的更新资料
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.