在按钮点击HTML5上对画布上的形状应用变换 [英] Apply transformations to shapes on canvas on button click-HTML5
问题描述
我试图将变换应用到基于鼠标坐标绘制的形状。我需要让用户为x和y输入一个值，然后根据这些值应用变换。我的理想的事件流程将是用户点击比例按钮，例如，然后提示用户输入x和y的值。
I'm trying to apply transformations to shapes drawn based on the mouse coordinates. I need to make the user enter a value for x and y and then apply transformations according to these values. My ideal flow of event would be the user clicks on a scale button for example, then the user is prompted to enter the value for x and y. Then the shape appears on the canvas based on the transformation.
这是我完整的代码集：
transform .html：
transform.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>
transform.js：
transform.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检索它们？
我试过了，但我不能让函数正常工作。
Can you give me suggestions about how i can prompt the user for the value of x and y or create a text field and have the user input the values and retrieve them using javascript? I've tried it but i can't get the function to work correctly. Please give me a hint.
推荐答案
您可以使用JS原生promt来让用户输入您的值 - 缺点：它只能一次处理一个输入，所以用户必须回答多个promts。
You can use the JS native promt to get the user to input your values - the downside : it can only process one input at once so the user would have to answer multiple promts.
演示
var x = prompt("Please enter x", "");
if (x != null) {
alert("x = " + x);
}
var y = prompt("Please enter y", "");
if (y != null) {
alert("y = " + y);
}
更优雅的是自定义promt。有很多示例，这里有一个来自jQueryUI。
A more elegant is a custom promt. There are a lot of examples for this, here's one from jQueryUI.
这篇关于在按钮点击HTML5上对画布上的形状应用变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
