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