drag, resize and rotate with mouse

Question

I need to be able to resize, rotate, and move an image. I have managed to find the code below that works but I need to either have a rotation point on the image where I can use it to rotate it with mouse or have the slider to move with the image. The problem starts when the image and the slider are too far apart. I would prefer to have the slider as part of the image if possible, somehow connected. Many thanks in advance for your help. The image is a protractor where it needs to be moved and rotated to measure angles. Below is my codes

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.result;
    }

    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);
    }

drag, resize and rotate with mouse

0 Answers0