我正在使用fabric.js,在画布中绘制一条线后,一个模态打开并在jquery中获取一些值。这些值是.adpend在div id =“#anotacao”中。如何使这些值可编辑?谢谢!
var creatingModal = false;
canvas.on('mouse:up', function (){
creatingModal = true;
jQuery('#modal').modal('show').trigger('shown');
//get values from obs form
jQuery(document).on("click", "#submitObservacao", function(e){
e.preventDefault();
var denteNumero = jQuery("#dente").val();
var procedimentos = jQuery("#procedimentos").val();
var observacao = jQuery("#observacoes").val();
jQuery("#anotacoes").append(
'<div class="thumbnail" id="itemObs"><b>Dente</b>:'+ denteNumero +' <i class="fa fa-trash f-right" id="removerNow" aria-hidden="true"></i> <br> <b>Procedimentos:</b> '+ procedimentos +'<br> <b>Observações:</b>'+ observacao +'<br> </div>'
);
//refreshing values
jQuery(denteNumero).val('');
jQuery("#dente").val('');
jQuery(procedimentos).val('');
jQuery(observacao).val('');
jQuery("#observacoes").val('');
jQuery('#modal').modal('hide').unique();
});
jQuery(document).on("click", "#itemObs", function(){
console.log('#itemObs');
});
jQuery(document).on("click", "#removerNow", function(e){
e.preventDefault();
jQuery(this).parent().remove();
var canvas_objects = canvas._objects;
console.log(canvas_objects);
if(canvas_objects.length !== 0){
var last = canvas_objects[canvas_objects.length -1]; //Get last object
canvas.remove(last);
canvase.renderAll();
}
});
});
HTML:
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 ">
<canvas id="c" width="840" height="590" style="border:1px solid #aaa"></canvas>
</div>
<div class="col-lg-4 col-md-4 col-sm-3 col-xs-12 ">
<div style="display: inline-block; margin-left: 10px">
<button style="visibility: hidden;" id="drawing-mode" class="btn btn-info">Cancel drawing mode</button><br>
<button style="visibility: hidden;" id="clear-canvas" class="btn btn-info">Clear</button><br>
<div id="drawing-mode-options">
<label style="visibility: hidden;" for="drawing-mode-selector">Mode:</label>
<select style="visibility: hidden;" id="drawing-mode-selector">
<option>Pencil</option>
<option>Circle</option>
<option>Spray</option>
<option>Pattern</option>
<option>hline</option>
<option>vline</option>
<option>square</option>
<option>diamond</option>
<option>texture</option>
</select><br>
<div class="thumbnail od-thumb">
<label for="drawing-line-width">Expessura da Linha:</label>
<span class="info">2</span><input type="range" value="2" min="0" max="150" id="drawing-line-width"><br>
<label for="drawing-color">Cor da Linha:</label>
<input type="color" value="#005E7A" id="drawing-color"><br>
</div>
<label style="visibility: hidden;" for="drawing-shadow-color">Shadow color:</label>
<input style="visibility: hidden;" type="color" value="#005E7A" id="drawing-shadow-color">
<label style="visibility: hidden;" for="drawing-shadow-width">Shadow width:</label>
<span style="visibility: hidden;" class="info">0</span><input style="visibility: hidden;" type="range" value="0" min="0" max="50" id="drawing-shadow-width">
<label style="visibility: hidden;" for="drawing-shadow-offset">Shadow offset:</label>
<span style="visibility: hidden;" class="info">0</span><input style="visibility: hidden;" type="range" value="0" min="0" max="50" id="drawing-shadow-offset">
</div>
</div>
<!-- close col-panel first-->
</div>
<!-- fecha row -->
</div>
<!-- jumbotron -->
<div class="row">
<div class="">
</div>
<div class="col-lg-12">
<div class="tron" id="anotacoes">
</div>
</div>
</div>
答案 0 :(得分:0)
也许您可以使用<input type="text" value="">
并将可修改的内容作为值。
因此,您可以使用一些ID隐藏在HTML代码中。在您的jquery中,您使用:$("#idoftheinput").val(JQUERY-var)
因此,您有表单字段,因此它们是可编辑的,您可以添加侦听器,以便在用户更改值时执行某些操作。