PaperJS avec des éléments html

Question

J'essaie d'ajouter une zone de saisie à des points spécifiques (onclick). Comment puis-je faire ceci. Pour une meilleure compréhension s'il vous plaît se référer Fiddle here

Et voici mon code:

<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

Voici la réponse,

<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(); 

         }); 
        } 
       }); 

Voici le paperJS onMouseMove() funciton

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

      } 
     } 

Answer 2

Voici un Soluton de travail: http://jsfiddle.net/DBfRT/2/

L'idée est de mettre à jour le PointText.content sur chaque image avec l'utilisateur la valeur d'entrée du clavier .

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 3

PointText.content Ne prend pas en charge le format HTML. Vous ne pouvez donc pas simplement ajouter l'élément d'entrée html sur le canevas en utilisant paperJS.