Question

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

This是我的微弱尝试。

我在初始重新缩放时遇到了麻烦。简而言之，我调整拖动手柄的第一个瞬间，盒子没有缩放到正确的高度和宽度。

知道为什么会这样吗？

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实施此内容：

tbW和tbH保持当前的大小（inital 200px x 100px）：

var tbW = 200,
    tbH = 100;

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

在mousedown上将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';
});

angularjs：重新缩放文本框

1 个答案: