Question

我正在使用PaperJS制作一个画布应用程序，用于在每个气球内生成带有文本的气球。但是，我想允许用户将每个气球内的文本编辑为他们想要说的任何内容。

是否可以允许用户像HTML文本输入字段一样编辑PaperJS TextItem？

Answer 1

简短的回答是否定的，除非您从头开始实现并行功能。我使用的解决方案是让用户绘制一个矩形，然后使用绝对定位在画布上使用文本框或textarea覆盖矩形。它需要额外的抽象级别，但可以很好地工作。

这是非平凡的，但这是一个基本框架，展示了它的工作原理。我可能会在某个时候在网上提供它，但这需要一点时间，所以我不知道什么时候。我也是从一个更大的系统中即时提取这个，所以如果你发现任何错误，请告诉我。

var rect;
var tool = new paper.Tool();

// create a paper rectangle. it's just a visual indicator of where the
// text will go.
tool.onMouseDown = function(e) {
    rect = new paper.Path.Rectangle(
               from: e.downPoint,
               to: e.downPoint,
               strokeColor: 'red',
               );
}

tool.onMouseDrag = function(3) {
    if (rect) {
        rect.remove();
    }
    rect = new paper.path.Rectangle({
            from: e.downPoint,
            to: e.point,
            strokeColor: 'red'
            });
}

tool.onMouseUp = function(e) {
    var bounds = rect.bounds;
    var textarea = $("<textarea class='dynamic-textarea' " + 
                   "style='position:absolute; left:" + bounds.x +
                   "px; top:" + bounds.y + "px; width: " + bounds.width +
                   "px; height: " + bounds.height +
                   "px; resize;' placeholder='Enter text'></textarea>");
    // make the paper rectangle invisible for now. may want to show on
    // mouseover or when selected.
    rect.visible = false;

    // add the text area to the DOM then remember it in the path
    $("#parent-div").append(textarea);
    rect.data.textarea = textarea;

    // you may want to give the textarea focus, assign tab indexes, etc.
};

在PaperJS中，允许用户编辑像常规文本输入字段一样的TextItem？

1 个答案: