Блог

Мне нужно иметь возможность изменять размер, поворачивать и перемещать изображение. Мне удалось найти приведенный ниже код, который работает, но мне нужно либо иметь точку поворота на изображении, где я могу использовать ее для поворота с помощью мыши, либо иметь ползунок для перемещения вместе с изображением. Проблема возникает, когда изображение и ползунок находятся слишком далеко друг от друга. Я бы предпочел, чтобы ползунок был частью изображения, если это возможно, каким-то образом связан. Заранее большое спасибо за вашу помощь. Изображение представляет собой транспортир, который необходимо перемещать и поворачивать для измерения углов. Ниже приведены мои коды

HTML

     <!-- Mockup img downloaded from www.magicmockups.com -->
    <!-- Change the mockup image to any image of your choice in the img tag bellow. -->
    <!-- XXX: WARNING: When the pen is saved, the movable div is RESET to the original 
    position/size/rotation. -->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    </div>
    <div style="margin-top: 20px">ROTATION SLIDER:</div>
    <div id="slider" style="display:inline-block; width: 50%; margin: 10px 0 10px1 0px;"> 
    </div>
    <div style="display: inline-block; position: relative;">
    <!-- CHANGE IMG TO YOUR IMG -->
    <div id="movable" >https://link to image</div> 
 

Javascript

     var currentUnit = "pixels"
    $( function() {
    $("input[type=radio]").checkboxradio();
    $("#slider").slider({
    min: -360,
    max: 360,
    slide: function(event, ui) {
    // Set the slider's correct value for "value".
    $(this).slider('value', ui.value);
    $("#movable").css('transform', 'rotate('   ui.value   'deg)')
    updateText()
    }
    });
    $("#movable").draggable({
    drag: function(event, ui) {
    updateText()
    }
    })
    $("#movable").resizable({
    resize: function(event, ui) {
    updateText()
    }
    })

    // Init the text.
    updateText();
    });

    function getPixelDimensions() {
    precision = 100

    // Save current transform (rotation).
    originalTransform = $("#movable").css('transform')
    // Remove rotation to make sure position() is the CSS position, not the bounding rect 
    position.
    $("#movable").css('transform', 'rotate(0deg)')
    position = $("#movable").position()
    // Restore rotation.
    $("#movable").css('transform', originalTransform)

    dim = {
    top: Math.round(position.top * precision) / precision,
    left: Math.round(position.left * precision) / precision,
    width: Math.round($("#movable")[0].clientWidth * precision) / precision,
    height: Math.round($("#movable")[0].clientHeight * precision) / precision
    }

    return dim;
    }

    function getPercentageDimensions() {

    }

    function updateText() {
    if(currentUnit == "pixels") {
    dim = getPixelDimensions();
    sufix = "px"
    } else {
    dim = getPercentageDimensions();
    sufix = "%"
    }

    $(".d").remove()
    for(prop in dim) {
    $("#dimensions").append( "<div class='d'>"   prop   ": "   dim[prop]   sufix   "</div>");
    }

    $("#dimensions").append( "<div class='d'>rotate: "   $("#slider").slider("value")   
    "deg</div>");


    //console.log($("#outer").position().top)


    }

    $('input').change(function() {
    if(this.id == "radio-1") {
    currentUnit = "pixels";
    updateText();
    } else if(this.id.search("radio") != -1){ 
    currentUnit = "percentage";
    updateText();
    }
    })


    function previewFile() {
    var preview = document.querySelector('img'); //selects the query named img
    var file    = document.querySelector('input[type=file]').files[0]; //sames as here
    var reader  = new FileReader();

    reader.onloadend = function () {
    preview.src = reader.resu<
    }

    if (file) {
    reader.readAsDataURL(file); //reads the data as a URL
    } else {
    preview.src = "";
    }
    }
 

CSS

     #movable {
    position: absolute; 
    text-align: center;


    /*Manually change values here.*/
    width: 400px; 
    height: 400px;
    top: 0px; 
    left: 0px;
    transform: rotate(0deg);
    }