matrix задать точку вращения.
как можно установить произвальную точку вращения ?
|
Произвольную точку вращения можно установить при помощи 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> |
это я знаю, но ...
есть код <%@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> при повороте изображения и последующем перемещении происходит скачок изображения ... как избавиться от этого? |
Часовой пояс GMT +3, время: 10:45. |