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

Question

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

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

Answer 1

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

这很重要，但这里有一个基本框架，可以稍微说明它的工作原理。我可能会在某个时候让它在线可用，但这需要一点时间，所以我不确定什么时候。我也在从一个更大的系统中即时提取这个，所以如果你发现任何错误，请告诉我。

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 吗？

In PaperJS allow the user to edit a TextItem like regular text input field?

javascript

canvas

paperjs