1
Я пытаюсь применить преобразования к фигурам, нарисованным на основе координат мыши. Мне нужно заставить пользователя ввести значение для x и y, а затем применить преобразования в соответствии с этими значениями. Мой идеальный поток событий был бы нажатием кнопки пользователя на кнопке масштаба, тогда пользователю будет предложено ввести значение для x и y. Затем форма появляется на холсте на основе преобразования.Применить преобразования к фигурам на холсте на кнопке click-HTML5
Вот мой полный набор кодов:
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:
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? Я пробовал, но я не могу заставить функцию работать правильно. Пожалуйста, дайте мне подсказку.
вы можете включить его в свой код, чтобы увидеть, как это работает? Я пробовал всевозможные вещи, но проблема в том, что я не могу включить его в свои коды. Я тоже пробовал с подсказками, но мне нужно получить позицию последней фигуры, которая заставляет меня использовать функцию drawPolygon. Можете ли вы показать мне работоспособное решение, пожалуйста? –
Я бы подумал, если вы предоставите рабочий живой пример. Я могу порекомендовать следующие сайты для создания такого примера: http://www.liveweave.com/, http://codepen.io/ или http://jsfiddle.net/ –
Хорошо, подождите минуту. –