将文本大小调整为矩形在Canvas HTML5中调整大小
我是Canvas的新手，我正在创建一个网站来增加文本，因为我重新调整了矩形。我尝试了很多，但没有任何对我有用。实际上我想要的是，如果我只是通过宽度（拉伸到左/右）来调整矩形，只应增加文本宽度而不是fontize。我已经完成了fontsize但是在增加隔离的文本高度和宽度方面遇到了困难。您的建议非常受欢迎
function Box2() {
this.x = 0;
this.y = 0;
this.w = 1; // default width and height?
this.h = 1;
this.fill = '#CC0000';
this.Owntext = "";
this.fontsize = '20';
this.TextColor = '';
this.TextFontFamily = '';
this.Angle = 0;
this.ScaleHeight = 1;
this.ScaleWidth = 1;
}
// New methods on the Box class
Box2.prototype = {
// we used to have a solo draw function
// but now each box is responsible for its own drawing
// mainDraw() will call this with the normal canvas
// myDown will call this with the ghost canvas with 'black'
draw: function (context, optionalColor) {
if (context === gctx) {
context.fillStyle = 'black'; // always want black for the ghost canvas
} else {
context.fillStyle = this.fill;
}
// alert('Box2.prototype');
// We can skip the drawing of elements that have moved off the screen:
if (this.x > WIDTH || this.y > HEIGHT) return;
if (this.x + this.w < 0 || this.y + this.h < 0) return;
context.fillRect(this.x, this.y, this.w, this.h);
// draw selection
// this is a stroke along the box and also 8 new selection handles
if (mySel === this) {
context.strokeStyle = mySelColor;
context.lineWidth = mySelWidth;
context.strokeRect(this.x, this.y, this.w, this.h);
// draw the boxes
var half = mySelBoxSize / 2;
// 0 1 2
// 3 4
// 5 6 7
// top left, middle, right
selectionHandles[0].x = this.x - half;
selectionHandles[0].y = this.y - half;
selectionHandles[1].x = this.x + this.w / 2 - half;
selectionHandles[1].y = this.y - half;
selectionHandles[2].x = this.x + this.w - half;
selectionHandles[2].y = this.y - half;
//middle left
selectionHandles[3].x = this.x - half;
selectionHandles[3].y = this.y + this.h / 2 - half;
//middle right
selectionHandles[4].x = this.x + this.w - half;
selectionHandles[4].y = this.y + this.h / 2 - half;
//bottom left, middle, right
selectionHandles[6].x = this.x + this.w / 2 - half;
selectionHandles[6].y = this.y + this.h - half;
selectionHandles[5].x = this.x - half;
selectionHandles[5].y = this.y + this.h - half;
selectionHandles[7].x = this.x + this.w - half;
selectionHandles[7].y = this.y + this.h - half;
context.fillStyle = mySelBoxColor;
for (var i = 0; i < 8; i++) {
var cur = selectionHandles[i];
context.fillRect(cur.x, cur.y, mySelBoxSize, mySelBoxSize);
}
}
} // end draw
}
//Initialize a new Box, add it, and invalidate the canvas
function addRect(x, y, w, h, fill,text,FontSize,TextColor,TextFontFamily,Angle,ScaleWidth,ScaleHeight) {
var rect = new Box2;
rect.x = x;
rect.y = y;
rect.w = w
rect.h = h;
rect.Owntext = text;
rect.FontSize = FontSize;
rect.TextColor = TextColor;
rect.TextFontFamily = TextFontFamily;
rect.Angle = Angle;
rect.ScaleWidth = ScaleWidth;
rect.ScaleHeight = ScaleHeight;
// alert(TextFontFamily);
// rect.fontsize = FontSize;
// alert(fill);
rect.fill = fill;
boxes2.push(rect);
invalidate();
}
var CanvasHeight = 0;
var CanvasWidth = 0;
// initialize our canvas, add a ghost canvas, set draw loop
// then add everything we want to intially exist on the canvas
function init2() {
// alert('init2')
dropdownTextFamily = document.getElementById('drpFontFamily');
dropdown = document.getElementById('drpTextColor');
Button = document.getElementById('Mybtn');
canvas = document.getElementById('canvas2');
HEIGHT = canvas.height;
WIDTH = canvas.width;
// CanvasHeight=
ctx = canvas.getContext('2d');
ghostcanvas = document.createElement('canvas');
ghostcanvas.height = HEIGHT;
ghostcanvas.width = WIDTH;
gctx = ghostcanvas.getContext('2d');
//fixes a problem where double clicking causes text to get selected on the canvas
canvas.onselectstart = function () { return false; }
// fixes mouse co-ordinate problems when there's a border or padding
// see getMouse for more detail
if (document.defaultView && document.defaultView.getComputedStyle) {
stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingLeft'], 10) || 0;
stylePaddingTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingTop'], 10) || 0;
styleBorderLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderLeftWidth'], 10) || 0;
styleBorderTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderTopWidth'], 10) || 0;
}
// make mainDraw() fire every INTERVAL milliseconds
setInterval(mainDraw, INTERVAL);
// set our events. Up and down are for dragging,
// double click is for making new boxes
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
Button.onclick = myDblClickButton;
dropdown.onchange = ChangeTextColor;
dropdownTextFamily.onchange = ChangeTextFontFamily;
// lblCheck.onclick = myclick;
// textBox.onkeyup = myDblClick;
// canvas.ondblclick = myDblClick;
// alert('ethe');
canvas.onmousemove = myMove;
// set up the selection handle boxes
for (var i = 0; i < 8; i++) {
// alert();
var rect = new Box2;
selectionHandles.push(rect);//WATCHED ******* A New Reactangle Added To The Canvas
}
// add custom initialization here:
// add a large green rectangle
// addRect(260, 70, 60, 65, 'rgba(0,205,0,0.7)');
// add a green-blue rectangle
// addRect(240, 120, 40, 40, 'rgba(2,165,165,0.7)');
// add a smaller purple rectangle
// addRect(45, 60, 25, 25, 'rgba(150,150,250,0.7)');
// get a reference to the canvas element, and its context
var canvas2 = document.getElementById('canvas2');
var ctx1 = canvas2.getContext('2d');
// sets maximum line width, line height, and x /y coords for text
var maxWidth = canvas2.width - 10;
var lineHeight = 23;
var x_pos = (canvas2.width - maxWidth) / 2;
var y_pos = 15;
var DbClickCount=0;
// register onkeyup event for #text_cnv text field to add the text in canvas as it is typed
document.getElementById('textBox').onkeyup = function () {
// clearCanvas(canvas2); // clears the canvas
//alert(ctx1);
// mySel.Owntext = this.value;
//alert(mySel.w);
if (mySel == null) {
// alert('I am Here');
myDblClick();
var x = 10;
var y = 10;
// alert(x);
myDown1(x, y);
addTextCnv(ctx1, this.value, mySel.x, mySel.y, mySel.h, mySel.w);
// addTextCnv(ctx1, this.value, 260, 120, 60, 65);
// myDown1();
// mySel.x = 260;
// mySel.y = 100;
// myDown1(260,100);
// mySel.h = 50;
// mySel.w = 5;
// addTextCnv(ctx1, this.value, 260, 100, 50, 5);
//// addTextCnv(ctx1, this.value, mySel.x, mySel.y, mySel.h, mySel.w);
}
else
{
// addTextCnv(ctx1, this.value, 260, 120, 60, 65);
// alert(mySel.x);
// alert(mySel.y);
// alert(mySel.h);
// alert(mySel.w);
addTextCnv(ctx1, this.value, mySel.x, mySel.y, mySel.h, lineHeight);
}
//alert(mySel.x);
//addTextCnv(ctx1, this.value, 260, 120, 60, 65);
// mainDraw(this.value);
//alert(this.value);
//addTextCnv(ctx1, this.value, x_pos, y_pos, maxWidth, 23);
}
var text2 = "Sachdeva";
// document.write("<p>Fontsize: " + text2.fontsize(6) + "</p>");
// text2.fontsize(6);
//alert(mySel.Owntext);
// ctx1.font = 'italic 20px Calibri';
ctx1.font = '20pt Calibri';
//TextFontFamily
var text1 = "rajay";
// var text3 = "rajay1";
// addRect(260, 70, 60, 15, 'rgba(0,205,0,0.7)',text1);
// add a smaller purple rectangle
// alert('hi');
// addRect(45, 60, 25, 15, 'rgba(150,150,250,0.7)', text2);
//addRect(260, 85, 60, 65, 'rgba(0,205,0,0.7)', text3);
}
function myMove(e) {
ctx = canvas.getContext('2d');
if (isDrag) {
// alert('hi');
getMouse(e);
// alert(e.x);
// alert('drag');
mySel.x = mx - offsetx;
// alert(mySel.x);
mySel.y = my - offsety;
// something is changing position so we better invalidate the canvas!
invalidate();
} else if (isResizeDrag) {
// alert('hi');
// time ro resize!
getMouse(e);
var oldx = mySel.x;
var oldy = mySel.y;
var oldw = mySel.w;
var oldh = mySel.h;
//alert(mySel.h);
//alert(expectResize)
switch (expectResize) {
case 0:
// mySel.x = mx;
// mySel.y = my;
// mySel.w += oldx - mx;
// mySel.h += oldy - my;
// mySel.ScaleWidth = 2;
// mySel.ScaleHeight = 1;
// alert(mySel.w);
// mySel.FontSize = (mySel.h/2)+(mySel.w/4);
// alert(mySel.FontSize);
// alert(mySel.h);
// alert(mySel.w);
// alert(mySel.Angle);
// var clickAngle = getAngle(mySel.x, mySel.y, mx, my) - mySel.Angle;
//alert(clickAngle);
//var clickAngle = getAngle(cX + offX, cY + offY, event.clientX, event.clientY) - model.angle;
// mySel.Angle = (getAngle(mySel.x, mySel.y, mx, my) - clickAngle);
// alert(mySel.Angle);
// mySel.Angle = 45;
// alert(mySel.Angle);
// alert(mySel.h);
// ctx.font = 'italic ' + (2 / 3) * mySel.h + 'px' + ' Calibri';
// ctx.font = 'italic ' + (2 / 3) * mySel.h+'px' + ' Calibri';
// alert(ctx.font);
break;
case 1:
mySel.y = my;
mySel.h += oldy - my;
// alert(mySel.h);
if (mySel.FontSize>mySel.h){
mySel.FontSize = mySel.h;
}
else
{
// alert('Hi');
mySel.FontSize = mySel.FontSize;
}
// mySel.FontSize = (mySel.h / 2) + (mySel.w / 4);
// ctx.scale(1, 2);
// ctx.font = 'italic ' + (2 / 3) * mySel.h + 'px' + ' Calibri';
break;
case 2:
mySel.y = my;
mySel.w = mx - oldx;
mySel.h += oldy - my;
mySel.FontSize = (mySel.h / 2) + (mySel.w / 4);
// ctx.font = 'italic ' + (2 / 3) * mySel.h + 'px' + ' Calibri';
break;
case 3:
mySel.x = mx;
mySel.w += oldx - mx;
mySel.FontSize = (mySel.h / 2) + (mySel.w / 4);
break;
case 4:
mySel.w = mx - oldx;
// mySel.FontSize = mySel.FontSize;
mySel.FontSize = (mySel.h / 2) + (mySel.w / 4);
break;
case 5:
mySel.x = mx;
mySel.w += oldx - mx;
mySel.h = my - oldy;
mySel.FontSize = (mySel.h / 2) + (mySel.w / 4);
// ctx.font = 'italic ' + (2 / 3) * mySel.h + 'px' + ' Calibri';
break;
case 6:
//mySel.h = my - oldy;
//mySel.FontSize = mySel.h;
// ctx.font = 'italic ' + (2 / 3) * mySel.h + 'px' + ' Calibri';
break;
case 7:
mySel.w = mx - oldx;
mySel.h = my - oldy;
mySel.FontSize = (mySel.h / 2) + (mySel.w / 4);
// ctx.font = 'italic ' + (2 / 3) * mySel.h + 'px' + ' Calibri';
break;
}
// alert(mySel.FontSize);
invalidate();
}
getMouse(e);
// if there's a selection see if we grabbed one of the selection handles
if (mySel !== null && !isResizeDrag) {
for (var i = 0; i < 8; i++) {
// 0 1 2
// 3 4
// 5 6 7
var cur = selectionHandles[i];
// alert('Here');
// we dont need to use the ghost context because
// selection handles will always be rectangles
if (mx >= cur.x && mx <= cur.x + mySelBoxSize &&
my >= cur.y && my <= cur.y + mySelBoxSize) {
// we found one!
expectResize = i;
invalidate();
switch (i) {
case 0:
this.style.cursor = 'nw-resize';
break;
case 1:
this.style.cursor = 'n-resize';
break;
case 2:
this.style.cursor = 'ne-resize';
break;
case 3:
this.style.cursor = 'w-resize';
break;
case 4:
this.style.cursor = 'e-resize';
break;
case 5:
this.style.cursor = 'sw-resize';
break;
case 6:
this.style.cursor = 's-resize';
break;
case 7:
this.style.cursor = 'se-resize';
break;
}
return;
}
}
// not over a selection box, return to normal
isResizeDrag = false;
expectResize = -1;
this.style.cursor = 'auto';
}
}
1 个答案:
答案 0 :(得分：3)
您需要执行一些计算才能获得文本的边界框，然后在上下文中使用 scale 使其与您要填充的矩形相匹配。
您可以使用 measureText 获取文本的宽度。不幸的是，只提供了文本宽度，但高度值始终与fontSize相近。
var cv = document.getElementById('cv');
var ctx = cv.getContext('2d');
function drawTextInBox(txt, font, x, y, w, h, angle) {
angle = angle || 0;
var fontHeight = 20;
var hMargin = 4;
ctx.font = fontHeight + 'px ' + font;
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
var txtWidth = ctx.measureText(txt).width + 2 * hMargin;
ctx.save();
ctx.translate(x+w/2, y);
ctx.rotate(angle);
ctx.strokeRect(-w/2, 0, w, h);
ctx.scale(w / txtWidth, h / fontHeight);
ctx.translate(hMargin, 0)
ctx.fillText(txt, -txtWidth/2, 0);
ctx.restore();
}
drawTextInBox('This is a line', 'Arial', 2, 2, 60, 20);
drawTextInBox('Another line here', 'Arial', 2, 32, 160, 40, 0.1);
drawTextInBox('The Last line', 'Arial', 2, 82, 220, 90);
drawTextInBox('! Now with an angle !', 'Arial', 42, 190, 120, 30, -Math.PI/12);<canvas width=400 height=300 id='cv'></canvas>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？