Question

目前我正在尝试使用jQuery拖放功能在画布上绘制图像。我试过这个。

<canvas id="c" width="200" height="200"></canvas>
<br>
<div style="display:inline-block;width:128px;height:128px;" id="wrapper">
    <img id="ico" src="https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/mustache.png" />
</div>

和JS

$('#wrapper').draggable();
$('#ico').resizable({
    aspectRatio: true,
    handles: 'ne, se, sw, nw'
});
$('#c').droppable({
    drop: function (event, ui) {
        $('#wrapper').dblclick(function () {
            var img = $('#ico');
            var ctxt = $("#c")[0].getContext("2d");
            var offs = $("#c").offset();
            var uiPos = img.offset();
            var x = uiPos.left - offs.left;
            var y = uiPos.top - offs.top;
            ctxt.drawImage(img[0], x, y);
            $('#wrapper').remove();
        });
        return false;
    }
});

我面临的问题是，当图像调整大小时，它不会应用新的大小。这是JSFiddle http://jsfiddle.net/MZpJ6/2/中的代码。以上代码是从网站的其他答案修改而来的，但我不想传播其他人的问题，所以我正在制作一个新的。

谢谢。

Answer 1

演示：http://jsfiddle.net/m1erickson/uxNSN/

您可以使用drawImage上的可选大小调整参数调整绘制到画布的图像

drawImage(theImage,x,y,width,height);

以下是如何在drawImage中使用新的宽度/高度

将调整后的尺寸保存在.resizable的调整大小事件

中

// first save a reference to the wrapper div

var $wrapper=$("#wrapper");    

// then save the new size in the .resizable's resize event

$('#ico').resizable({

    aspectRatio: true,
    handles: 'ne, se, sw, nw',
    resize:function(event,ui){
        $wrapper.newWidth=ui.size.width;
        $wrapper.newHeight=ui.size.height;
    },
});

然后你可以在.droppable的drop事件中使用drawImage的resizing参数：

$('#c').droppable({
    drop: function (event, ui) {
        $('#wrapper').dblclick(function () {
            var img = $('#ico');
            var ctxt = $("#c")[0].getContext("2d");
            var offs = $("#c").offset();
            var uiPos = img.offset();
            var x = uiPos.left - offs.left;
            var y = uiPos.top - offs.top;
            ctxt.drawImage(img[0], x, y,$wrapper.newWidth,$wrapper.newHeight);
            $('#wrapper').remove();
        });
        return false;
    }
});

在画布上应用可调整大小的图像

1 个答案: