Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.05.2019, 19:41
Интересующийся
Отправить личное сообщение для ТвердолобыйЛамер Посмотреть профиль Найти все сообщения от ТвердолобыйЛамер
 
Регистрация: 06.08.2017
Сообщений: 15

Paint для мобильного телефона.
Всем привет , в одной умной книШке "HTML 5 Недостающее руководство "
нашел такой код, но проблемa в том , что он работает в браузере , но не работает в мобильном тел. Если я правилно понял , то в мобильнике не распознаются события мыши. Но как переделать код под мобильны, пока ума не хватает. Был бы рад помощи. Спасибо .

var canvas;
var context;

window.onload = function()
{
	// Get the canvas and the drawing context.
	canvas = document.getElementById("drawingCanvas");
	context = canvas.getContext("2d");

	// Attach the events that you need for drawing.
	canvas.onmousedown = startDrawing;
	canvas.onmouseup = stopDrawing;
	canvas.onmouseout = stopDrawing;
	canvas.onmousemove = draw;
};

var isDrawing = false;

function startDrawing(e)
{
	// Start drawing.
	isDrawing = true;

	// Create a new path (with the current stroke color and stroke thickness).
	context.beginPath();

	// Put the pen down where the mouse is positioned.
	context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
}

function stopDrawing()
{
	isDrawing = false;
}

function draw(e)
{
	if (isDrawing == true)
	{
		// Find the new position of the mouse.
		var x = e.pageX - canvas.offsetLeft;
		var y = e.pageY - canvas.offsetTop;

		// Draw a line to the new position.
		context.lineTo(x, y);
		context.stroke();
	}
}

// Keep track of the previous clicked <img> element for color.
var previousColorElement;

function changeColor(color, imgElement)
{
	// Change the current drawing color.
	context.strokeStyle = color;

	// Give the newly clicked <img> element a new style.
	imgElement.className = "Selected";

	// Return the previously clicked <img> element to its normal state.
	if (previousColorElement != null) previousColorElement.className = "";
	previousColorElement = imgElement;
}

// Keep track of the previous clicked <img> element for thickness.
var previousThicknessElement;

function changeThickness(thickness, imgElement)
{
	// Change the current drawing thickness.
	context.lineWidth = thickness;

	// Give the newly clicked <img> element a new style.
	imgElement.className = "Selected";

	// Return the previously clicked <img> element to its normal state.
	if (previousThicknessElement != null) previousThicknessElement.className = "";
	previousThicknessElement = imgElement;
}


function clearCanvas()
{
	context.clearRect(0, 0, canvas.width, canvas.height);
}

function saveCanvas()
{
	// Find the <img> element.
	var imageCopy = document.getElementById("savedImageCopy");

	// Show the canvas data in the image.
	imageCopy.src = canvas.toDataURL();

	// Unhide the <div> that holds the <img>, so the picture is now visible.
	var imageContainer = document.getElementById("savedCopyContainer");
	imageContainer.style.display = "block";
}
Ответить с цитированием
  #2 (permalink)  
Старый 18.05.2019, 20:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,116

ТвердолобыйЛамер,
https://developer.mozilla.org/en-US/...I/Touch_events
Ответить с цитированием
  #3 (permalink)  
Старый 18.05.2019, 20:21
Интересующийся
Отправить личное сообщение для ТвердолобыйЛамер Посмотреть профиль Найти все сообщения от ТвердолобыйЛамер
 
Регистрация: 06.08.2017
Сообщений: 15

Спасибо , и что мне это даст? На моем примере никак нельзя подсказать?
Ответить с цитированием
  #4 (permalink)  
Старый 18.05.2019, 21:15
Интересующийся
Отправить личное сообщение для ТвердолобыйЛамер Посмотреть профиль Найти все сообщения от ТвердолобыйЛамер
 
Регистрация: 06.08.2017
Сообщений: 15

На первой же строке ошибка

Ответить с цитированием
  #5 (permalink)  
Старый 18.05.2019, 22:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,116

ТвердолобыйЛамер,
var canvas;
var context;

window.onload = function()
{
	// Get the canvas and the drawing context.
	canvas = document.getElementById("drawingCanvas");
	context = canvas.getContext("2d");

	// Attach the events that you need for drawing.

    canvas.addEventListener("touchstart", startDrawing, false);
    canvas.addEventListener("touchend", stopDrawing, false);
    canvas.addEventListener("touchcancel", stopDrawing, false);
    canvas.addEventListener("touchmove", draw, false);




};

var isDrawing = false;

function startDrawing(e)
{
	// Start drawing.
	isDrawing = true;

	// Create a new path (with the current stroke color and stroke thickness).
	context.beginPath();

	// Put the pen down where the mouse is positioned.
	context.moveTo(e.targetTouches[0].pageX - canvas.offsetLeft, e.targetTouches[0].pageY - canvas.offsetTop);
}

function stopDrawing()
{
	isDrawing = false;
}

function draw(e)
{
	if (isDrawing == true)
	{
		// Find the new position of the mouse.
		var x = e.targetTouches[0].pageX - canvas.offsetLeft;
		var y = e.targetTouches[0].pageY - canvas.offsetTop;

		// Draw a line to the new position.
		context.lineTo(x, y);
		context.stroke();
	}
}

// Keep track of the previous clicked <img> element for color.
var previousColorElement;

function changeColor(color, imgElement)
{
	// Change the current drawing color.
	context.strokeStyle = color;

	// Give the newly clicked <img> element a new style.
	imgElement.className = "Selected";

	// Return the previously clicked <img> element to its normal state.
	if (previousColorElement != null) previousColorElement.className = "";
	previousColorElement = imgElement;
}

// Keep track of the previous clicked <img> element for thickness.
var previousThicknessElement;

function changeThickness(thickness, imgElement)
{
	// Change the current drawing thickness.
	context.lineWidth = thickness;

	// Give the newly clicked <img> element a new style.
	imgElement.className = "Selected";

	// Return the previously clicked <img> element to its normal state.
	if (previousThicknessElement != null) previousThicknessElement.className = "";
	previousThicknessElement = imgElement;
}


function clearCanvas()
{
	context.clearRect(0, 0, canvas.width, canvas.height);
}

function saveCanvas()
{
	// Find the <img> element.
	var imageCopy = document.getElementById("savedImageCopy");

	// Show the canvas data in the image.
	imageCopy.src = canvas.toDataURL();

	// Unhide the <div> that holds the <img>, so the picture is now visible.
	var imageContainer = document.getElementById("savedCopyContainer");
	imageContainer.style.display = "block";
}

Последний раз редактировалось рони, 18.05.2019 в 22:14.
Ответить с цитированием
  #6 (permalink)  
Старый 18.05.2019, 22:29
Интересующийся
Отправить личное сообщение для ТвердолобыйЛамер Посмотреть профиль Найти все сообщения от ТвердолобыйЛамер
 
Регистрация: 06.08.2017
Сообщений: 15

Огромаднейшее спасибо! Работает. Теперь буду разбираться с кодом. )
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как запретить отправку формы если маил занят. daimon0482 AJAX и COMET 9 21.06.2017 04:09
Регулярное выражение для проверки мобильного DVMade Общие вопросы Javascript 25 24.03.2017 02:46
Поле для ввода телефона. При потери фокуса поля, маска прячется DDim1000 Общие вопросы Javascript 1 23.11.2016 20:02
Скрипт корзины для сайта EasyNetShop.ru Ваши сайты и скрипты 0 17.11.2016 14:57