html事件改变矩形大小

问题描述

我是 Canvas 的新手，我正在创建一个网站来在调整矩形大小时增加文本.实际上，我只

想按矩形的宽度(向左/向右拉伸)来调整矩形的大小，则仅应增加文本宽度而不是

fontsize.我已经完成了 fontsize，但是在增加孤立的 Text Height 和 Width 时遇到了

困难.欢迎您提出建议

function Box2() {

this.x = 0;

this.y = 0;

this.w = 1;

// default width and height?

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'

}

// 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;

// 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[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, myS

elBoxSize);

}

}

}

// end draw

var rect = new Box2;

rect.h = h;

rect.Owntext = text;

rect.FontSize = FontSize;

rect.TextColor = TextColor;

rect.TextFontFamily = TextFontFamily;

rect.Angle = Angle;

rect.ScaleWidth = ScaleWidth;

rect.ScaleHeight = ScaleHeight;

rect.fill = fill;

var CanvasWidth = 0;

// initialize our canvas, add a ghost canvas, set draw loop

// alert('init2')