привязка линии к сетке

controbas1

привет Я пытаюсь создать страницу, которая позволит посетителю рисовать линии.

У меня есть этот скрипт, но мне нужно, чтобы линии рисования были прямыми, а начальная и конечная мышь должна привязываться к сетке, линии сетки должны быть видимы. также, могу ли я добавить опцию рисования дуги (можно нарисовать, нажав на три точки) вот мой код страницы:

 <html>


<script type="text/javascript">


var canvas, ctx, flag = false,


prevX = 0,


currX = 0,


prevY = 0,


currY = 0,


dot_flag = false;


var x = "black",


y = 2;


function init() {


canvas = document.getElementById('can');


ctx = canvas.getContext("2d");


w = canvas.width;


h = canvas.height;


canvas.addEventListener("mousemove", function (e) {


findxy('move', e)


}, false);


canvas.addEventListener("mousedown", function (e) {


findxy('down', e)


}, false);


canvas.addEventListener("mouseup", function (e) {


findxy('up', e)


}, false);


canvas.addEventListener("mouseout", function (e) {


findxy('out', e)


}, false);


}


function color(obj) {


switch (obj.id) {


case "green":


x = "green";


break;


case "blue":


x = "blue";


break;


case "red":


x = "red";


break;


case "yellow":


x = "yellow";


break;


case "orange":


x = "orange";


break;


case "black":


x = "black";


break;


case "white":


x = "white";


break;


}


if (x == "white") y = 14;


else y = 2;


}


function draw() {


ctx.beginPath();


ctx.moveTo(prevX, prevY);


ctx.lineTo(currX, currY);


ctx.strokeStyle = x;


ctx.lineWidth = y;


ctx.stroke();


ctx.closePath();


}


function erase() {


var m = confirm("Want to clear");


if (m) {


ctx.clearRect(0, 0, w, h);


document.getElementById("canvasimg").style.display = "none";


}


}


function save() {


document.getElementById("canvasimg").style.border = "2px solid";


var dataURL = canvas.toDataURL();


document.getElementById("canvasimg").src = dataURL;


document.getElementById("canvasimg").style.display = "inline";


}


function findxy(res, e) {


if (res == 'down') {


prevX = currX;


prevY = currY;


currX = e.clientX - canvas.offsetLeft;


currY = e.clientY - canvas.offsetTop;


flag = true;


dot_flag = true;


if (dot_flag) {


ctx.beginPath();


ctx.fillStyle = x;


ctx.fillRect(currX, currY, 2, 2);


ctx.closePath();


dot_flag = false;


}


}


if (res == 'up' || res == "out") {


flag = false;


}


if (res == 'move') {


if (flag) {


prevX = currX;


prevY = currY;


currX = e.clientX - canvas.offsetLeft;


currY = e.clientY - canvas.offsetTop;


draw();


}


}


}


</script>


<body onload="init()">


<canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>


<div style="position:absolute;top:12%;left:43%;">Choose Color</div>


<div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" id="green" onclick="color(this)"></div>


<div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"></div>


<div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div>


<div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"></div>


<div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"></div>


<div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div>


<div style="position:absolute;top:20%;left:43%;">Eraser</div>


<div style="position:absolute;top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div>


<img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">


<input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:55%;left:10%;">


<input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;">


</body>


</html>

Код (разметка):

SeoPultenok20

Математика привязки к сетке (по крайней мере, при условии целочисленной точности) довольно проста:

GridX = Math.round(mouseX/gridSize) *gridSize;

Тем не менее, у вас МНОГО проблем в вашем коде, статические сценарии в разметке только бессмысленны, статический стиль в разметке тратит впустую пропускную способность, DIV выполняет работу BUTTON, тратит время на повторный захват одного и того же элемента по идентификатору, что приводит к бессмысленным накладным расходам, использование насобытие такие атрибуты, как onclick, которые нам в течение десяти лет советовали прекратить использовать (и они даже НЕ СУЩЕСТВУЮТ, если вы развертываете их под CSP), добавляя бессмысленные накладные расходы за счет использования одиночных обратных вызовов для обработки множества возможностей...

Или даже что, поскольку вы не записываете то, что рисуется, все стирается и теряется при изменении размера окна.

Похожие темы	Дата
[Udemy] Denys Mescheryakov - Современный JavaScript с нуля на реальных проектах (2019)	19.10.2024, 18:10
[itvdn] Видео Курс Angularjs Essential	19.10.2024, 18:10
[Владилен Минин] Javascript. Стань Senior Frontend Разработчиком (2020)	19.10.2024, 18:10
[lynda.com] Основной Курс По Javascript	19.10.2024, 18:10
[javascript.ru] Курс По Node.js	19.10.2024, 18:10
Вопрос по коду Javascript для обратного подсчета	19.10.2024, 18:10
Что вы автоматизировали в своих процессах электронной коммерции?	19.10.2024, 18:10
2много кофе \| Full-Stack компания по разработке и дизайну	19.10.2024, 18:10
Строки таблицы переключаются с подкатегориями	19.10.2024, 18:10
[javascript.ru] Курс по Angular.JS - Суворов (2016)	19.10.2024, 18:10

привязка линии к сетке

controbas1

SeoPultenok20

I AM

Интересно