Javascript angularjs：重新缩放文本框

我正在尝试制作一个可编辑的文本框，就像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';
                });
            }

我更新了您的应用程序：

tbW

和

tbH

保持当前框大小（初始200px 100px）：

鼠标按下时，将startX和startY指定给当前鼠标位置

在调整大小功能中，计算鼠标移动的增量，并将其添加到

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

---

明亮的为迟来的回复道歉。非常感谢。

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