我有三个画布元素重叠在另一个元素上。第一个是图片，第二个是过滤器，第三个应该是文本。我通过鼠标事件使过滤器的大小可调整和可拖动，但是以某种方式，这不适用于文本。我想用四个角按钮调整文本大小，并使其可拖动。文本是通过自编程的简单文本编辑器添加的。
红色正方形是现在绘制矩形的地方，但是htey应该在文本周围，蓝色正方形是拖动文本的复选框。
现在输入我的Js代码。
var colorButton = document.getElementById("primary_color");
var textArea = document.getElementById("text");
var editor = document.getElementById("text");
var overlay = document.getElementById("overlay");
var textFontFamily = document.getElementById("selectForFonts");
var textColor;
var fontStyleFamily = 'Arial';
var boldness = 'normal';
var italicness = 'normal';
var data;
/**Function to get the color and color the text*/
colorButton.onchange = function() {
textColor = colorButton.value;
textArea.style.color = textColor;
}
function showOverlay() {
overlay.style.display = "block";
}
function writeText() {
$(function() {
var canvasText = document.getElementById("canvasText");
var ctxText = canvasText.getContext("2d");
var $canvasText = $("#canvasText");
var canvasOffset;
var offsetX;
var offsetY;
var isDown;
var dx;
var dy;
var lastX = 0;
var lastY = 0;
var iW;
var iH;
var iLeft = 0;
var iTop = 0;
var iRight, iBottom, iOrientation;
canvasText.height = renderableHeight;
canvasText.width = renderableWidth;
overlay.style.display = "none";
data = textArea.value;
canvasText.style.display = "block";
canvasOffset = $canvasText.offset();
offsetX = canvasOffset.left;
offsetY = canvasOffset.top;
isDown = false;
var textWidthtemp = ctxText.measureText(data);
var textWidth = textWidthtemp.width;
var textHeight = parseInt("50");
var font = italicness + " " + boldness + " " + textHeight + "px " + fontStyleFamily;
iW = textWidth;
iH = textHeight;
facW = 1; // canvasText.width / canvasText.offsetWidth;
facH = 1; //canvasText.height / canvasText.offsetHeight;
console.log(facW + " " + facH);
iRight = iLeft + iW;
iBottom = iTop + iH;
console.log(iTop);
console.log(iBottom);
console.log(iRight);
console.log(iBottom);
iOrientation = "Wide"; //(iW >= iH) ? "Wide" : "Tall";
draw(true);
var border = 10;
var isLeft = false;
var isRight = false;
var isTop = false;
var isBottom = false;
var iAnchor;
canvasText.onmousedown = handleMousedown;
canvasText.onmousemove = handleMousemove;
canvasText.onmouseup = handleMouseup;
canvasText.onmouseout = handleMouseup;
function hitResizeAnchor(x, y) {
// which borders are under the mouse
isLeft = (x * facW > iLeft && x * facW < iLeft + border);
isRight = (x * facW < iRight && x * facW > iRight - border);
isTop = (y * facH > iTop && y * facH < iTop + border);
isBottom = (y * facH < iBottom && y * facH > iBottom - border);
isDragged = (x * facW > iLeft && x * facW < iRight && y * facH > iTop && y * facH < iBottom);
// return the appropriate anchor
if (isTop && isLeft) {
return (iOrientation + "TL");
}
if (isTop && isRight) {
return (iOrientation + "TR");
}
if (isBottom && isLeft) {
return (iOrientation + "BL");
}
if (isBottom && isRight) {
return (iOrientation + "BR");
}
if (isDragged) {
return "DR"
}
return (null);
}
var resizeFunctions = {
WideTR: function(x, y) {
iRight = x * facW;
iTop = iBottom - (iH * (iRight - iLeft) / iW);
},
TallTR: function(x, y) {
iTop = y * facH;
iRight = iLeft + (iW * (iBottom - iTop) / iH);
},
WideBR: function(x, y) {
iRight = x * facW;
iBottom = iTop + (iH * (iRight - iLeft) / iW);
},
TallBR: function(x, y) {
iBottom = y * facH;
iRight = iLeft + (iW * (iBottom - iTop) / iH);
},
WideBL: function(x, y) {
iLeft = x * facW;
iBottom = iTop + (iH * (iRight - iLeft) / iW);
},
TallBL: function(x, y) {
iBottom = y * facH;
iLeft = iRight - (iW * (iBottom - iTop) / iH);
},
WideTL: function(x, y) {
iLeft = x * facW;
iTop = iBottom - (iH * (iRight - iLeft) / iW);
},
TallTL: function(x, y) {
iBottom = y * facH;
iLeft = iRight - (iW * (iBottom - iTop) / iH);
},
DR: function(x, y) {
console.log("DX: " + dx + "DY: " + dy);
iLeft += dx;
iRight += dx;
iTop += dy;
iBottom += dy;
}
};
function handleMousedown(e) {
// tell the browser we'll handle this mousedown
e.preventDefault();
e.stopPropagation();
var mouseX = e.clientX - offsetX;
var mouseY = e.clientY - offsetY;
iAnchor = hitResizeAnchor(mouseX, mouseY);
if (iAnchor == "DR") {
lastX = mouseX;
lastY = mouseY;
isDown = (true);
} else {
isDown = (iAnchor);
}
}
function handleMouseup(e) {
// tell the browser we'll handle this mouseup
e.preventDefault();
e.stopPropagation();
if (iAnchor == "DR") {
isDown = false;
} else {
isDown = false;
draw(true);
}
}
function handleMousemove(e) {
// tell the browser we'll handle this mousemove
e.preventDefault();
e.stopPropagation();
// return if we're not dragging
if (!isDown) {
return;
}
// get MouseX/Y
var mouseX = e.clientX - offsetX;
var mouseY = e.clientY - offsetY;
//if Picture is dragged
if (iAnchor == "DR") {
dx = mouseX - lastX;
dy = mouseY - lastY;
// set the lastXY for next time we're here
lastX = mouseX;
lastY = mouseY;
resizeFunctions[iAnchor](mouseX, mouseY);
draw(true);
} else {
// reset iLeft,iRight,iTop,iBottom based on drag
resizeFunctions[iAnchor](mouseX, mouseY);
// redraw the resized image
draw(false);
}
}
function draw(withAnchors) {
ctxText.clearRect(0, 0, canvasText.width, canvasText.height);
ctxText.font = font;
ctxText.fillStyle = textColor;
ctxText.fillText(data, iLeft, iTop - textHeight);
if (withAnchors) {
ctxText.fillRect(iLeft, iTop - textHeight, border, border);
ctxText.fillRect(iRight - border, iTop - textHeight, border, border);
ctxText.fillRect(iRight - border, iBottom - border - textHeight, border, border);
ctxText.fillRect(iLeft, iBottom - border - textHeight, border, border);
}
}
});
}
function bold() {
var temp = textArea.style.fontWeight;
if (temp == 'normal') {
textArea.style.fontWeight = 'bold';
boldness = 'bold';
} else {
textArea.style.fontWeight = 'normal';
boldness = 'normal';
}
}
function italic() {
var temp = textArea.style.fontStyle;
if (temp == 'normal') {
textArea.style.fontStyle = 'italic';
italicness = 'italic';
} else {
textArea.style.fontStyle = 'normal';
italicness = 'normal';
}
}
function changeFont() {
var temp = textFontFamily.options[textFontFamily.selectedIndex].value;
console.log(temp);
textArea.style.fontFamily = temp;
fontStyleFamily = temp;
}
<div id="display" class="flex-workspace-item-big z-depth-2">
<canvas id=canvas style="width:inherit ;height:inherit; position: absolute; z-index: 0;"></canvas>
<canvas id=canvasFilter style="width:inherit ;height:inherit; position: absolute; display: none; z-index: 1"></canvas>
<canvas id=canvasText style="width:inherit ;height:inherit; position: absolute; display: none; z-index: 2"></canvas>
</div>