Question

我构建了一个小的webapp，用户可以在画布上绘制线条。让我说我绘制一个圆，我怎样才能创建一个选择每个绘制对象的函数。稍后我想调整（缩放）当前单击的对象。到目前为止，我的Javascript函数看起来像这样，但我不知道如何继续。

所以我需要这个步骤

用鼠标绘制画布（已经有效）

点击每张图纸

foreach drawing我想例如创建一个更改大小（比例）的滑块

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这样的库，但有没有办法将这些结合起来呢？目前我不想重新编码所有内容，但最糟糕的情况是我会。

Answer 1

请找到下面提到的解决方案。这是运行您想要的代码，这仅用于演示目的。请根据您的要求进行修改。

$(document).ready(function(){

var canvas = new fabric.Canvas('paper', {
        isDrawingMode: false,
        height: 200,
        width: 200,
        top: 0,
        left: 0
    });
    var isDown;

    canvas.isDrawingMode = true;
    var drawingColorEl = $('#drawing-color');
    var drawingLineWidthEl = $('#drawing-line-width');

    canvas.freeDrawingBrush.color = drawingColorEl.val();
    canvas.freeDrawingBrush.width = drawingLineWidthEl.val();

    drawingColorEl.change(function() {
        isDown = true;
        canvas.isDrawingMode = true;
        canvas.freeDrawingBrush.color = this.value;
    });

    drawingLineWidthEl.change(function() {
        isDown = true;
        canvas.isDrawingMode = true;
        canvas.freeDrawingBrush.width = drawingLineWidthEl.val();
    });



    $('#selectMode').click(function() {
        var objs = [];
        objs = canvas.getObjects();

        var alltogetherObj = new fabric.Group(objs, {
        });
        canvas._activeObject = null;
        if (objs.length != 0) {
            canvas.setActiveGroup(alltogetherObj.setCoords()).renderAll();
        }
        isDown = false;
        canvas.isDrawingMode = false;

    });

    $('#drawMode').click(function() {
        isDown = true;
        canvas.isDrawingMode = true;
        canvas.discardActiveGroup();
        canvas.discardActiveObject();
        canvas.renderAll();
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.12/fabric.min.js"></script>

<select id="drawing-color">
    <option value="#ff0000">Red</option>
    <option value="#000000">Black</option>
</select>

<select id="drawing-line-width">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<input type="button" id="selectMode" value="Select Mode" />
<input type="button" id="drawMode" value="Draw Mode"/>
<canvas id="paper" style="border:1px solid #ccc"></canvas>

如果它不适合你，请告诉我。

Answer 2

这不是一项简单的任务，而且从我看来，你应该使用像pixie.js这样的库，请看这个例子 -

http://pixijs.github.io/examples/#/demos/dragging.js

但是，如果你真的想通过自己来实现它，那将是一个真正的挑战。我建议您在此处查看我的代码 - http://kill-them.com/assets/js/applications/MapEditor.js?v=7

要查看其工作原理，您可以转到http://kill-them.com/，按short session，然后转到顶部菜单中的map editor。在那里，您将能够看到地图编辑器，您可以在其中放置墙。会有控件，如调整大小和旋转。但实际上，如果我将再次从头开始创建同一个项目，我将使用库。

JavaScript拖动绘制的画布元素

2 个答案: