Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.01.2015, 20:00
Интересующийся
Отправить личное сообщение для assan Посмотреть профиль Найти все сообщения от assan
 
Регистрация: 13.07.2010
Сообщений: 27

matrix задать точку вращения.
как можно установить произвальную точку вращения ?
Ответить с цитированием
  #2 (permalink)  
Старый 02.01.2015, 21:46
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Произвольную точку вращения можно установить при помощи CSS-свойства transform-origin.

<style>

.box-border {
  margin: 15px 50px;
}

.box-border, .box {
  width: 100px;
  height: 100px;
  border: 1px dotted #808080;
  top: 0;
  left: 0;
  position: relative;
  display: inline-block;
}

.box {
  position: absolute;
  background-color: #ff8888;
  -webkit-transition: 0.5s all ease-in-out 0s;
}

.top_left_origin {
    -webkit-transform-origin: 0 0;
}

.top_left_origin:hover {
  -webkit-transform: rotate(360deg);
  -webkit-transition: 1s all ease-in-out 0s;
}

.center_origin:hover {
  -webkit-transform: rotate(360deg);
  -webkit-transform-origin: 50% 50%;
  -webkit-transition: 1s all ease-in-out 0s;
}

</style>
<div class="box-border">
  <div class="box"></div>
</div>
<div class="box-border">
  <div class="box top_left_origin">transform-origin: 0px 0px;</div>
</div>
<div class="box-border">
  <div class="box center_origin">transform-origin: 50% 50%;</div>
</div>
Ответить с цитированием
  #3 (permalink)  
Старый 02.01.2015, 22:48
Интересующийся
Отправить личное сообщение для assan Посмотреть профиль Найти все сообщения от assan
 
Регистрация: 13.07.2010
Сообщений: 27

это я знаю, но ...
есть код
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="js/libs/jquery/jquery.js" type="text/javascript"></script>
        <script src="js/libs/jqueryui/jquery-ui.js" type="text/javascript"></script>
        <script src="js/jquery.mousewheel.js" type="text/javascript"></script><!--   http://webext.ru/fix-mousewheel/-->
        <!--<link href="CSS/pic.css" rel="stylesheet" type="text/css"/>-->

        <style>
            #div1{
                position: absolute;
                top: 10px;
                left: 15%;
                width: 700px;
                height: 700px;
                border: 1px solid #c0c0c0;
                box-sizing: border-box;
                overflow: hidden;
            }

            #div2{
                position: absolute;
                background: aqua;
            }
            #div2 img{
                width: 100%;
                height: 100%;
            }
            #rotate{
                background: #ffffff;
                z-index: 10;
                height: 700px;
                -webkit-appearance: slider-vertical; 
            }
            #crop{
                pointer-events:none;
                background: transparent;
                position: absolute;
                border: 1px #000156 solid;
                box-shadow: 0 0 0 500px rgba(0, 0, 0, 0.3);
                width: 100px;
                height: 100px;

                top: calc(50% - 50px);
                left: calc(50% - 50px);
                z-index: 100;
            }

        </style>
    </head>
    <body>
        <div id="div1">
            <div id="crop"></div>
            <div id="div2"> 
                <img id="img" src="pic/up.png" alt=""/>
            </div>
        </div>
        <div>
            <input id="rotate" type="range" value="0" min="-180" max="180" step="1">
        </div>
        <input type="file" id="file" >
        <button id="crop_button">crop</button>
        <div class="cropped"></div>
        <script>
            var dx = 0;
            var dy = 0;
            var xb;
            var yb;
            function tr_or() {
                var Cy = $('#div1').height() / 2;
                var Cx = $('#div1').width() / 2;
//                var hp = $('#div2').height() / 2;
//                var wp = $('#div2').width() / 2;
                var xx = 0;
                var yy = 0;
                if (!isNaN(parseFloat($('#div2').css('left'))))
                    xx = parseFloat($('#div2').css('left'));
                if (!isNaN(parseFloat($('#div2').css('top'))))
                    yy = parseFloat($('#div2').css('top'));
                dx = parseFloat(Cx) - xx;
                dy = parseFloat(Cy) - yy;
                var s = '' + dx + 'px' + ' ' + dy + 'px';
                $('#img').css('transform-origin', s);
                console.log($('#img').css('transform-origin'));
            }

            <%-- назначение пермещения --%>
            $(document).ready(function () {
                $('#div2').draggable({
                    stop: function (event, ui) {
                        tr_or();
                    }
                });
            });
            var t = 0;

            <%-- ресайз пока заглушка --%>
            $('#div1').mousewheel(function (event) {
                var movement = 0;
                var d = 0;
                var dir = event.originalEvent.wheelDelta > 0 ? true : false;
                var height = parseInt($('#div2').css('height'), 10);
                var width = parseInt($('#div2').css('width'), 10);
                var top = parseInt($('#div2').css('top'), 10);
                var left = parseInt($('#div2').css('left'), 10);
                if (dir === true) {
                    movement = +2;
                    d = -1;

                } else {
                    movement = -2;
                    d = +1;
                }
                $('#div2').css('top', top + d);
                $('#div2').css('left', left + d);
                $('#div2').css('height', height + movement);
                $('#div2').css('width', width + movement);
            });

            <%-- поворот ползунком --%>
            $(document).on('input', '#rotate', function () {
                tr_or();
                t = $('#rotate').val();
                $('#img').css('transform', 'rotate(' + t + 'deg)');
            });

            <%-- поворот колесом мыши --%>
            $('#rotate').mousewheel(function (event) {
                var t = parseInt($('#rotate').val());
                var d = 0;
                var dir = event.originalEvent.wheelDelta > 0 ? true : false;
                if (dir === true) {
                    d = -1;
                } else {
                    d = +1;
                }
                $('#rotate').val(t + d);
                $('#img').css('transform', 'rotate(' + t + 'deg)');
                tr_or();
            });

            <%-- загрузка файла --%>
            document.querySelector('#file').addEventListener('change', function () {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#img').attr('src', e.target.result);
                    $('#div2').css('width', $('#div1').width());
                    tr_or();
                };
                reader.readAsDataURL(this.files[0]);
                this.files = [];
            });



            <%-- обрезка --%>
            $(document).on('click', '#crop_button', function () {
                var dy = parseInt($('#crop').css('top')) - parseInt($('#div2').css('top'));
                var dx = parseInt($('#crop').css('left')) - parseInt($('#div2').css('left'));
                console.log($('#crop').css('top') + '   ' + $('#div2').css('top'));
                canvas = document.createElement("canvas");
                canvas.height = 150;
                canvas.width = 150;
                var context = canvas.getContext("2d");
                var pic = new Image();
                pic.src = $('#img').attr('src');
                var H = parseFloat(pic.height);
                var h = parseFloat($('#img').height());
                var y = dy * H / h;
                var W = parseFloat(pic.width);
                var w = parseFloat($('#img').width());
                var x = dx * W / w;
                context.drawImage(pic, x, y, 150, 150, 0, 0, 150, 150);
                pic.src = canvas.toDataURL("image/jpeg");
                canvas.height = 150;
                canvas.width = 150;
                context.translate(75, 75);
                context.rotate((parseInt($('#rotate').val()) * Math.PI) / 180);
                context.drawImage(pic, -75, -75);
                pic.src = canvas.toDataURL("image/jpeg");
                canvas.height = 100;
                canvas.width = 100;
                context.drawImage(pic, 25, 25, 100, 100, 0, 0, 100, 100);
//              var  imageData = canvas.toDataURL("image/jpeg");
                document.querySelector('.cropped').innerHTML += '<img id="cc1" src="' + canvas.toDataURL("image/jpeg") + '">';
            });
        </script>
    </body>
</html>

при повороте изображения и последующем перемещении происходит скачок изображения ...
как избавиться от этого?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вводить только цифры и точку tai jQuery 3 13.07.2014 04:49
Как задать координаты для draggable-элемента, добавленного с помощью jquery UI begin jQuery 5 16.05.2014 20:14
Заменить запятую на точку snake Javascript под браузер 2 27.12.2013 09:54
Как правильно задать ID в создаваемом элементе ? Indiana Events/DOM/Window 15 31.10.2010 16:15