javascript - angularjs:重新缩放文本框

Question

我正在尝试制作一个可编辑的文本框，就像在 powerpoint 和其他演示文稿编辑器中那样。

This是我微弱的尝试。

我在初始缩放时遇到了问题。简而言之，当我调整拖动 handle 的第一瞬间，盒子没有缩放到正确的高度和宽度。

知道为什么会这样吗？

element.find('span').bind('mousedown', function(event) {
                console.log('resizing...');
                event.preventDefault();
                var domElement = element[0];

                var rect = domElement.getBoundingClientRect();
                startX = rect.left;
                startY = rect.bottom;
                console.log(startX + " " + startY);

                $document.bind('mousemove', resize);
                $document.bind('mouseup', mouseup2);
                event.cancelBubble = true;
            });


function resize(event) {

                var height = event.screenY - startY;
                var width = event.screenX - startX;
                scope.$apply(function() {
                    scope.tb.height = height + 'px';
                    scope.tb.width = width + 'px';
                });
            }

Answer 1

我更新了你的 fiddle实现这个:

1. tbW 和 tbH 保存当前框大小(初始 200px x 100px):

   var tbW = 200,
       tbH = 100;
   
   scope.tb.width = tbW + 'px',
   scope.tb.height = tbH + 'px';
   

2. 在鼠标按下时，startX 和 startY 被分配给当前鼠标位置

3. 在调整大小函数中，计算鼠标移动的增量并将其添加到 tbox 的宽度和高度:

   tbH += event.screenY - startY;
   startY = event.screenY;
   tbW += event.screenX - startX;
   startX = event.screenX;
   scope.$apply(function () {
     scope.tb.height = tbH + 'px';
     scope.tb.width = tbW + 'px';
   });