我正在尝试对基于鼠标坐标绘制的形状应用变换。我需要让用户输入 x 和 y 的值，然后根据这些值应用转换。例如，我理想的事件流是用户单击比例按钮，然后提示用户输入 x 和 y 的值。然后基于转换的形状出现在 Canvas 上。
这是我的完整代码集:
转换.html:
<!DOCTYPE html>
<head>
<title>Drawing Application</title>
<link href="transform.css" rel="stylesheet">
</head>
<body>
<canvas id="myCanvas" width="1000" height="500" style="position: absolute; z-index: 1"></canvas>
<span style="position: absolute; z-index: 2; margin-left:830px; margin-top:280px; background-color:white; font-size:12px;">(0,0)</span>
<br><output id="out"></output>
<script src="transform.js"></script>
<div id="shapeProperties">
<p>
<label>
<div id="shape">
<p><b>Fill shapes option:</b> <input type="checkbox" id="fillType"></b><br/>
<p><b><center><u>Shapes</u></center></b>
<p>Polygon <input type="checkbox" id="polyBox"><br/>
</div>
<div id="color">
<b><p><center><u>Color Properties</u></center></b><br/>
<p>Fill Color <input type="color" id="fillColor" value="#000000"/><br/>
<p>Stroke Color <input type="color" id="strokeColor" value="#000000"/><br/>
</div>
<div id="range">
<b><p><center><u>Other Properties</u></center></b><br/>
<label>Polygon Sides <input type="range" id="polygonSide" step="1" min="3" max="9" value="3"></label>
</div>
<div id="clear">
<p> <center><input id="clearCanvas" type="button" value="CLEAR"></center></p>
</div>
</label>
</p>
</div>
</body>
</html>
转换.js:
var canvas,context,dragging = false ,dragStartLocation,snapshot,shapeBox,fillColor,lineWidth,strokeColor,canvasColor,clearCanvas, transX, transY;
function getMouseCoordinate(event)
{
var x = event.clientX - myCanvas.getBoundingClientRect().left - transX,
y = event.clientY - myCanvas.getBoundingClientRect().top - transY;
return {x: x, y: y}; //return objects
}
function getSnapshot()
{
snapshot = context.getImageData(0,0,myCanvas.width, myCanvas.height); //get the image while dragging
}
function restoreSnapshot()
{
context.putImageData(snapshot, 0 , 0); //put the image into the canvas at the same position
}
function drawPolygon(position, sides, angle) {
var coordinates = [],
radius = Math.sqrt(Math.pow((dragStartLocation.x - position.x), 2) + Math.pow((dragStartLocation.y - position.y), 2)),
index = 0;
for (index = 0; index < sides; index++) {
coordinates.push({x: dragStartLocation.x + radius * Math.cos(angle), y: dragStartLocation.y - radius * Math.sin(angle)});
angle += (2 * Math.PI) / sides;
}
context.beginPath();
context.moveTo(coordinates[0].x, coordinates[0].y);
for (index = 1; index < sides; index++) {
context.lineTo(coordinates[index].x, coordinates[index].y);
}
context.closePath();
context.stroke();
context.strokeStyle = strokeColor.value;
}
function changeBackgroundColor()
{
context.save();
context.fillStyle = document.getElementById("backgroundColor").value;
context.fillRect(0, 0, myCanvas.width, myCanvas.height);
context.restore();
}
function canvasClear()
{
context.clearRect(0,0, myCanvas.width, myCanvas.height);
}
function startDrag(event)
{
dragging = true; //dragging has started
dragStartLocation = getMouseCoordinate(event);
getSnapshot();
}
function drag(event)
{
var position;
if(dragging == true) {
polygonSides = document.getElementById("polygonSide").value;
restoreSnapshot();
position = getMouseCoordinate(event); //check whether dragging has started
if(fillType.checked)
{
context.fillStyle = fillColor.value;
context.fill();
context.globalAlpha = 0.9;
}
if(polyBox.checked)
{
drawPolygon(position, polygonSides, 0 * (Math.PI / 180));
}
}
}
function stopDrag(event)
{
polygonSides = document.getElementById("polygonSide").value;
dragging = false; //stop dragging
var position = getMouseCoordinate(event);
restoreSnapshot();
if(fillType.checked)
{
context.fillStyle = fillColor.value;
context.fill();
context.globalAlpha = 0.9;
}
if(polyBox.checked)
{
drawPolygon(position, polygonSides, 0 * (Math.PI / 180));
}
}
function changeFillStyle()
{
context.fillStyle=this.value;
event.stopPropagation();
}
function changeLineWidth()
{
context.lineWidth=this.value;
event.stopPropagation();
}
function initiate()
{
fillColor=document.getElementById('fillColor');
strokeColor=document.getElementById('strokeColor');
clearCanvas = document.getElementById('clearCanvas');
canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
transX = canvas.width * 0.5;
transY = canvas.height * 0.5;
context.translate(transX, transY);
context.fillRect(0, -transY, 1, canvas.height);
context.fillRect(-transX, 0, canvas.width, 1);
context.strokeStyle = strokeColor.value;
context.fillStyle = fillColor.value;
context.lineCap = "round";
window.addEventListener('mousedown', startDrag, false);
window.addEventListener('mousemove', drag, false);
window.addEventListener('mouseup', stopDrag, false);
fillColor.addEventListener("input",changeFillStyle,false);
clear.addEventListener("click", canvasClear, false);
}
window.addEventListener('load', initiate, false);
这是应用程序的样子:
关于如何提示用户输入 x 和 y 的值或创建文本字段并让用户输入值并使用 javascript 检索它们，您能给我一些建议吗？ 我试过了，但我无法使该功能正常工作。请给我一个提示。
最佳答案
您可以使用 JS native 提示让用户输入您的值 - 缺点:它一次只能处理一个输入，因此用户必须回答多个提示。
演示
var x = prompt("Please enter x", "");
if (x != null) {
alert("x = " + x);
}
var y = prompt("Please enter y", "");
if (y != null) {
alert("y = " + y);
}更优雅的是自定义提示。这有很多例子，here's one from jQueryUI.
关于javascript - 单击按钮时将变换应用于 Canvas 上的形状-HTML5，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29751617/