添加另一個答案,因爲另一次是完全關閉。
Live Demo
你本質上需要的是跟蹤邊界框。我所做的是創建一個對象,該對象保存您繪製位置的最小值和最大值。這使您能夠跟蹤圖像的大小以及開始/結束的位置。
this.dim = {minX : 9999, minY : 9999, maxX : 0, maxY : 0};
然後我創建了一個函數來檢查邊界。
this.setDimensions = function(x,y){
if(x < this.dim.minX){
this.dim.minX = x;
}
if(y < this.dim.minY){
this.dim.minY = y;
}
if(x > this.dim.maxX){
this.dim.maxX= x;
}
if(y > this.dim.maxY){
this.dim.maxY = y;
}
}
請務必在點擊或移動過程中進行檢查。
this.mousedown = function(ev) {
tool.setDimensions(ev._x,ev._y);
};
this.mousemove = function(ev) {
tool.setDimensions(ev._x,ev._y);
};
而這僅僅是繪製的部分,以新的畫布,你可以接着用toDataUrl
var button = document.getElementsByTagName("input")[0];
button.addEventListener("click", function(){
var savedCanvas = document.createElement("canvas"),
savedCtx = savedCanvas.getContext("2d"),
minX = PEN.dim.minX,
minY = PEN.dim.minY,
maxX = PEN.dim.maxX,
maxY = PEN.dim.maxY,
width = maxX - minX,
height = maxY - minY;
savedCanvas.width = width;
savedCanvas.height = height;
document.body.appendChild(savedCanvas);
savedCtx.drawImage(canvas,minX,minY,width,height,0,0,width,height);
});
感謝您的精彩代碼保存的樣本函數。但是,在練習時,我發現圖像的一些小部分被從右上方切掉。你如何增加捕獲箱的大小? –
@Lotkar:你看起來相當有經驗。因爲我是編碼新手。你能幫我畫出不同線寬的相同圖像嗎?簡單地說,我希望線條寬度在畫布上拖動時從小到正常變化。爲了使圖畫看起來不那麼專業?謝謝 –