如何在画布上制作像powerpoint可调文本的文本？

Question

Image:

I want to generate textbox when I click on the button and that is adjustable and editable on canvas. This image is the example actually what I want. If any tool available which is I integrate and use the functionality on the HTML page.

Answer 1

You may want to have a look at http://interactjs.io/ which according to them is a

JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE8+)

To edit text you may try something like this:

$('#fullname').click(function(){
    var name = $(this).text();
    $(this).html('');
    $('<input></input>')
        .attr({
            'type': 'text',
            'name': 'fname',
            'id': 'txt_fullname',
            'size': '30',
            'value': name
        })
        .appendTo('#fullname');
    $('#txt_fullname').focus();
});

$(document).on('blur','#txt_fullname', function(){
    var name = $(this).val();
    //alert('Make an AJAX call and pass this parameter >> name=' + name);
    $('#fullname').text(name);
});

and html

<div id="fullname">Change me</div>

Check out this pen