0
我構建了一個小web應用程序，用戶可以在畫布上繪製線條。比方說，我畫了一個圓，我怎樣才能做出選擇每個繪製對象的功能。稍後，我想調整（縮放）當前點擊的對象。我的Javascript函數看起來像這樣到目前爲止，但我不知道如何繼續。JavaScript拖動繪製的畫布元素
所以我需要這個步驟
- 平局帆布鼠標（這個工程已經）
- 點擊每個繪圖
- 的foreach圖紙我想例如創建一個滑塊，更改大小（標度）
var canvasTools = (function() {
var CanvasEditor = function CanvasEditor(settings) {
var color = settings.color || 'black',
width = settings.width || 10;
this.activeTool = null;
this.canvas = settings.canvas;
this.panel = settings.panel;
this.panelInput = settings.panelInput;
this.pencil = new Tool_pencil(this.canvas, color, width);
};
CanvasEditor.prototype = {
'constructor': CanvasEditor,
'clear': function clear() {
this.canvas.getContext('2d').clearRect(0, 0, this.canvas.width, this.canvas.height);
return this;
},
'init': function init() {
this.canvas.addEventListener('mousedown', function downHandler(event) {
if (this.activeTool) {
this.activeTool.start(event);
}
}.bind(this), false);
this.canvas.addEventListener('mousemove', function downHandler(event) {
if (this.activeTool && this.activeTool.active) {
this.activeTool.move(event);
}
}.bind(this), false);
this.canvas.addEventListener('mouseup', function downHandler(event) {
if (this.activeTool) {
this.activeTool.end(event);
}
}.bind(this), false);
return this;
},
'tool': function tool(toolName) {
if (toolName && this[toolName]) {
this.activeTool = this[toolName];
}
return this.activeTool;
},
'refresh': function refresh() {
},
'scale': function scale(panel, canvas, panelInput) {
if (panel) {
this.panel.addEventListener('click', function(event) {
var panelValue = this.value;
var newWidth = canvas.width * panelValue;
var newHeight = canvas.height * panelValue;
panelInput.value = panelValue;
canvas.getContext('2d').scale(newWidth, newHeight);
});
} else {
console.log("kein panel");
}
},
};
var CanvasTool = function CanvasTool(canvas) {
if (!canvas) {
console.log(this.name + ' - no canvas');
}
this.active = false;
this.canvas = canvas;
this.context = canvas.getContext('2d');
};
CanvasTool.prototype = {
'constructor': CanvasTool,
'coords': function coords(event) {
return {
'x': (event.layerX || event.offsetX),
'y': (event.layerY || event.offsetY)
};
}
};
var Tool_pencil = function Tool_pencil(canvas, color, width) {
CanvasTool.call(this, canvas);
this._color = color;
this._width = width;
};
Tool_pencil.prototype = Object.create(CanvasTool.prototype, {
'constructor': {
'value': Tool_pencil
},
'color': {
'value': function color(newColor) {
if (newColor) {
this._color = newColor;
return this;
}
return this._color;
}
},
'end': {
'value': function end(event) {
this.move(event);
this.active = false;
}
},
'move': {
'value': function move(event) {
var location = this.coords(event);
this.canvas.style.cursor = 'pointer';
this.context.lineTo(location.x, location.y);
this.context.stroke();
//if(myCanvasTools.panelInput && myCanvasTools.panelInput.value && myCanvasTools.panelInput.value != 0) {
myCanvasTools.scale(myCanvasTools.panel, myCanvasTools.canvas, myCanvasTools.panelInput);
this.context.stroke();
//}
}
},
'start': {
'value': function start(event) {
var location = this.coords(event);
this.context.beginPath();
this.context.strokeStyle = this.color();
this.context.lineWidth = this.width();
this.context.moveTo(location.x, location.y);
this.active = true;
}
},
'width': {
'value': function width(newWidth) {
if (newWidth) {
this._width = newWidth;
return this;
}
return this._width;
}
}
});
return function canvasToolsFactory(settings) {
return new CanvasEditor(settings);
};
}());
// Canvas Modul Initialiseren
var myCanvasTools = canvasTools({
'canvas': document.querySelector('#imageView'),
'panel': document.querySelector('#canvasSliderPanel'),
'panelInput': document.querySelector('#canvasDepthValue'),
'color': 'black',
'width': 5
});
myCanvasTools.init();
編輯 有些人建議我使用像fabric.js這樣的庫，但是有沒有辦法將這些結合起來呢？目前我不想重新編碼一切，但最糟糕的情況是我會。
你有沒有人可以繪製和選擇區域+尺寸函數的例子？ – utdev
所以你的意思是說繪製矩形的創建函數..？像這樣你問 –
我現在的腳本讓我們用鼠標畫線，畫圈等，我想選擇我用鼠標畫的畫。你有這樣的例子嗎？ – utdev