Question

如何使用jquery创建画布工具我想创建工具来控制画布元素，如旋转，调整大小和翻转我在网站上这样做，但我不知道他们是如何做到的该网站是:: https://gomockingbird.com/mockingbird

我希望像示例网站一样添加监听器以显示或隐藏工具，并点击编辑内容作为示例

我尝试这样做

$('body').on('click','.art',function(){
            var rand = Math.ceil(Math.random() * 100087600);
            var canvas = loadCanvas({src:"assets/img/"+$( this ).attr("data-img"),id:'canvas_'+$(this).attr('data-name')+'_'+rand});
            //.resizable();
            //canvas.css('position','absolute');
            /*
            <div style="overflow: hidden; position: absolute; visibility: visible; z-index: 0; left: 119px; top: 134px; width: 422px; height: 115px; -webkit-transform: translateX(0px);"><canvas width="422" height="115" style="z-index: -100; overflow: hidden; position: absolute; visibility: visible; top: 0px; left: 0px; width: 422px; height: 115px;"></canvas></div>
            .('<div />',{w:10,H:10})*/
            $('#stage').prepend('<div id="div_'+$(this).attr('data-name')+'_'+rand+'" style="position: absolute"></div>');

            $('#div_'+$(this).attr('data-name')+'_'+rand).hide();
            $('#div_'+$(this).attr('data-name')+'_'+rand).prepend(canvas);
            $('#div_'+$(this).attr('data-name')+'_'+rand).show('scale');
            $('#div_'+$(this).attr('data-name')+'_'+rand).draggable({ containment: "parent" }).resizable({ containment: "parent" });
        });

Answer 1

如果您打算在画布上进行大量操作，那么我建议使用kineticjs。您计划完成的大部分内容都可以在kinecticjs中轻松实现。他们有很棒的教程和体面的docs.Hope有帮助。

如何使用jquery创建画布工具

1 个答案: