Показать сообщение отдельно
  #1 (permalink)  
Старый 24.04.2018, 11:16
Новичок на форуме
Отправить личное сообщение для Miracle5 Посмотреть профиль Найти все сообщения от Miracle5
 
Регистрация: 20.02.2018
Сообщений: 9

Оцентровать изображение
Ребят, как оцентровать изображения когда перетягиваешь? Она сейчас цепляет с левого верхнего угла. Код некоторое подобие паззлов

index.html
<!DOCTYPE html>
<html>
<head>
	<title>Пазлы УдГУ</title>
    <script type="text/javascript" src="js/puzzleilnaz.js"></script>
	<link rel="stylesheet" href="css/style.css">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">

        var game = null;
        var imageID = "img1";
        var totalRows;
        var totalColumns;


        function InitGame() {
            LoadNewImage(imageID);
        }

        function LoadNewImage(imgID) {
            imageID = imgID;
            
            totalRows = 3;
			totalColumns = 3;
            
            LoadGame();
        }
        
        function LoadGame() {
            var canvasID = "puzz";

            game = new pazzli(canvasID, imageID, totalRows, totalColumns);

            game.initDrawing();

        }

        function ShowPreview() {
            if (game) {

                game.showPreview();

            }
        }
		
		function previewFile() {
			var preview = document.querySelector('img');
			var file    = document.querySelector('input[type=file]').files[0];
			var reader  = new FileReader();

			reader.onloadend = function () {
				preview.src = reader.result;
			}

			if (file) {
				reader.readAsDataURL(file);
			} else {
				preview.src = "";
			}
		}
	
    </script>	
</head>
<body onload="InitGame();">
    <table>
        <tr>
            <td>
                <div>
                    <table cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            
                            <td width="150px">
                                <span >
                                    <input type="button" value="Показать картинку" onclick="ShowPreview()" />
                                </span>
                            </td>
                        </tr>
                    </table>
                </div>
                <div>
                    <canvas id="puzz" width="1000" height="575" style="border: black solid 2px;"></canvas>
                </div>
            </td>
            <td width="20px">
                &nbsp;
            </td>
            <td style="vertical-align: top;">
                <div align="right" style="height: 585px; width: 320px; border: black solid 1px; overflow: auto;">
                    <div>
						<p>Выберите картинку</p>
						<input type="file" onchange="previewFile()" multiple accept="image/*,image/jpeg"><br>
						<p>Кликните по картинке 2 раза, чтобы активировать пазл</p>
                        <img id="img1" width="300" height="200" ondblclick="LoadNewImage(this.id);" src="Images/BugsLife.jpg"></img>
                    </div>
                </div>
            </td>
        </tr>
    </table>	
	<div class="footer"><img src="Images/logo_udsu.png" alt="Udsu" width="32" height="32"></div>
</body>
</html>
Ответить с цитированием