【发布时间】：2017-06-14 07:42:33
【问题描述】：
我构建了一个小 web 应用程序，用户可以在其中在画布上画线。假设我画了一个圆圈，我怎样才能制作一个选择每个绘制对象的函数。稍后我想调整（缩放）当前点击的对象。到目前为止，我的 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 这样的库，但是有没有办法将它们结合起来呢？目前我不想重新编码所有内容，但最坏的情况我会。
【问题讨论】：
标签： javascript jquery html canvas