How to check the margin of an element?

Asked

Viewed 40 times

1

I have a code to resize an element, I need to capture the resize from a margin of 18 pixels:

$(document).on("mousedown",".image",function(me) {
         var move = $(this);
         var fm = matrix(this);
         var sv = scaleValue(this);
         //--
         var data = move.offset();
         data.width = move.width();
         data.height = move.height();

         var sx = me.clientX;
         var sy = me.clientY;

         var x = (me.offsetX != null) ? me.offsetX : me.originalEvent.layerX;
         var y = (me.offsetY != null) ? me.offsetY : me.originalEvent.layerY;
         //--

         var elementW = move.width();
         var elementH = move.height();
         var relX = me.pageX - move.offset().left;
         var relY = me.pageY - move.offset().top;
         var isSizingRight = false, isSizingLeft = false, isSizingHeight = false;

         var margin = 18;


         var img_crop_margin_width = (elementW - margin);
         var img_crop_margin_height = (elementH - margin);

         if ((data.height - x) < 18) {
             isSizingRight = true;
         } else if((data.height - y) < 18) {
             isSizingHeight = true;
         } else {
             if (x < 18 || y < 18) {
                isSizingLeft = true;
             }
         }

        // console.log(isSizing + " - " + isSizingLeft);
         //--

         var lastOffset = move.data('lastTransform');
         var lastOffsetX = lastOffset ? lastOffset.dx : 0,
             lastOffsetY = lastOffset ? lastOffset.dy : 0;

         lastOffsetX = lastOffsetY = 0;
         var startX = me.pageX - lastOffsetX, startY = me.pageY - lastOffsetY;

         $(document).on("mousemove",function(e) {

            if(!isEraser && !drawPen) {
                var newDx = (e.pageX - startX),
                    newDy = (e.pageY - startY);


                if (isSizingRight) {
                   // console.log('aumento para direita - x');
                    var dif = e.pageX - startX;
                    var startScale = (((dif - 48) / 100) / 2.5);
                    var scaleVal = ((elementW + dif) / elementW) + startScale;
                    var t = scale(fm, scaleVal);
                    startScale = 0;


                    move.css('transform', t);

                } else if (isSizingHeight) {
                  //  console.log('aumento para direita - y');
                    var dif = startX - e.pageX;

                    var startScale = (((dif - 48) / 100) / 2.5);
                    var scaleVal = ((elementH + dif) / elementH) + startScale;
                    var t = scale(fm, scaleVal);
                    startScale = 0;
                    move.css('transform', t);
                } else {
                    if (isSizingLeft) {
                      //  console.log('aumento para esquerda - x');
                        var dif = startX - e.pageX;

                        var startScale = (((dif - 48) / 100) / 2.5);
                        var scaleVal = ((elementW + dif) / elementW) + startScale;
                        var t = scale(fm, scaleVal);
                        startScale = 0;
                        move.css('transform', t);


                    } else {
                        var t = translate(fm, newDx / sv, newDy / sv);
                       // console.log('arrastar');
                        move.css('transform', t);

                        //move.css('transform','translate(' + newDx + 'px, ' + newDy + 'px)');

                        // we need to save last made offset
                        move.data('lastTransform', {dx: newDx, dy: newDy});
                    }
                }
            }
         });
     });

The problem is that it’s not working very well on the right side. It should just drag the object and resize only when in the margin.

See example: inserir a descrição da imagem aqui

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.