javascript - angularjs：重新缩放文本框

Question

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

这是我微弱的尝试。

我在初始重新缩放时遇到了麻烦。简而言之，当我调整拖动手柄时，框没有缩放到正确的高度和宽度。

知道为什么会这样吗？

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

我更新了你的小提琴实现这个：

1. tbW并tbH保持当前框大小（初始 200px x 100px）：

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

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

3. 在 resize 函数中，计算鼠标移动的增量并将其添加到您的宽度和高度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';
   });