javascript - PaperJS 与 html 元素

Question

我正在尝试在特定点（onclick）中添加一个输入框。我怎样才能做到这一点。为了更好地理解，请在此处参考 Fiddle

这是我的代码：

<script type="text/paperscript" canvas="canvas">
    var m=0;

    function onMouseDrag(event) {
    var path = new PointText({
                        point: event.point,
                        content: 'The contents of the point text',
                        fillColor: 'black',
                        fontSize: 25
                    });
    path.removeOnDrag();
    }

     function onMouseUp(event) {
        m++;
        var point = event.point;
        createInput(point);
    }

    function createInput(point){
            console.log(point); 
        }
    </script>

Answer 1

这是一个可行的解决方案：http: //jsfiddle.net/DBfRT/2/

这个想法是使用用户 keyBoard 输入值更新每一帧上的 PointText.content。

var m=0;
var input = '';
var inputPrepend = 'User input: ';
var inputs = [];

function onKeyUp(event) {
    // add user key inputs into the input variable
    input += event.key;
}

 function onMouseUp(event) {
    m++;
    var point = event.point;
    var path = new PointText({
                    point: point,
                    content: inputPrepend + input,
                    fillColor: 'black',
                    fontSize: 25
                });
    inputs.push(path);
}


function onFrame(e) {
    for(var i = 0;i < inputs.length;i++) {
        // loop through every input and update it's content 
        inputs[i].content = inputPrepend + input;
    }
}

Answer 2

PointText.content不支持 HTML。因此，您不能只使用 paperJS 将 html 输入元素添加到画布上。

Answer 3

这是答案，

<input type="hidden" value="" id="x-text">
<input type="hidden" value="" id="y-text">
<input type="hidden" value="" id="content-text">

$("#canvas").click(function(e){
                        if(set==5){
                        var offset = $(this).offset();
                        $("#position").text((e.clientX - offset.left) + ", " + (e.clientY - offset.top));
                        $("#position").empty();
                        var input = $("<input type='text' value='' class='addtext' id='addText'>");
                        var save = $("<input type='button' class='save' value='save' id='save'>");
                        var discard = $("<input type='button' class='discard' value='discard' id='disc'>");
                        $("#position").append(input);
                        $("#position").append(save);
                        $("#position").append(discard);
                        $("#position").css('position', 'absolute');
                        $("#position").css('left', e.clientX - offset.left);
                        $("#position").css('top', e.clientY);
                        var xcor = $("#x-text");
                        var ycor = $("#y-text");
                        var ctext = $("#content-text");
                        var atext = $("#addText");
                        discard.click(function(){
                        $(this).parent().empty();
                        });
                        save.click(function(){
                            ctext.val(atext.val());
                            xcor.val(e.clientX - offset.left);
                            ycor.val(e.clientY);
                            $(this).parent().empty();

                        });
                    }
                });

这是paperJSonMouseMove()功能

function onMouseMove(event){
                if(set == 5){
                document.getElementById('save').onclick = function (){
                    m++;
                    var xcor = document.getElementById('x-text').value;
                    var ycor = document.getElementById('y-text').value;
                    var cont = document.getElementById('content-text').value;
                    var text = new PointText({
                        point: [xcor, ycor - 150],
                        content: cont,
                        fillColor: 'black',
                        fontSize: 25
                        });
                    var txt = new Group();
                    txt.addChild(text);
                    createElem('Notes', m, txt);
                }

            }
        }