Question

我是angular，html，javascript的新手，我没有弄清楚如何创建一个小提琴来解释我的问题（对不起），所以我上传到我的Dropbox：https://www.dropbox.com/s/60efg5vo3qql29c/image_canvas.zip?dl=0

所以我要做的是将图像从我的数据库上传到画布，然后使用带有文本的fabricjs绘制一个到多个矩形，但是当我这样做时，图像消失，只显示新的绘制的矩形，我做错了什么？提前谢谢。

[编辑]

这是我的角度文件

$scope.addRectangleToCanvas = function () {
    try {
        var c = document.getElementById('canvas');
        var colorPicker = $('#btnColor');
        var fontPicker = $('#bntfontsize');
        var canvas = new fabric.Canvas('canvas', { selection: true });

        var selText = $('#txtCustomComments').val();

        var color = new fabric.Color(colorPicker.val()).toRgb();

        var fontSize = fontPicker.val();

        commentText = new fabric.IText(selText, {
            fontSize: fontSize,
            hasControls: false,
            hasBorders: true,
            originX: 'center',
            backgroundColor: 'rgba(0,0,0,0)',
            borderColor: color,
            opacity: 0.6,
            fill: color,
            fontFamily: "helvetica"
        });

        var commentRectange = new fabric.Rect({
            originX: 'center',
            top: 30,
            width: 300,
            height: 200,
            fill: 'rgba(0,0,0,0)',
            stroke: color,
            strokeWidth: 4
        });

        var group = new fabric.Group([commentText, commentRectange], {
            left: 100,
            top: 150
        });

        canvas.add(group);
        canvas.bringForward(group);

    } catch (exception) {
        alert(exception);
        console.log(exception);
    }
};


$scope.GetNextNodes = function () {

    var commentRectange, commentText;
    var canvas = new fabric.Canvas('canvas', {
        selection: true
    });
    var colorPicker = $('#btnColor');
    var fontPicker = $('#bntfontsize');
    var image = new Image();
    var imageComp;

    image.crossOrigin = "Anonymous";
    image.onload = function () {
        //imageComp = fabric.Image('https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg', function (img) {
        imageComp = fabric.Image.fromURL('https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg', function (img) {

            var oImg = img.set({
                angle: 0,
                cornersize: 10,
                hoverCursor: "default",
                lockMovementX: true,
                lockMovementY: true,
                lockRotation: true,
                hasRotatingPoint: true,
                hasControls: false,
                hasBorders: false,
                lockScalingFlip: true,
                lockScalingX: true,
                lockScalingY: true,
                lockSkewingX: true,
                lockSkewingY: true,
                height: image.naturalHeight,
                width: image.naturalWidth
            });
            canvas.add(oImg).setActiveObject(oImg);
            canvas.moveTo(oImg, window.objectIndex);
        }, { crossOrigin: 'Anonymous' });
        canvas.setHeight(image.naturalHeight);
        canvas.setWidth(image.naturalWidth);
    };
    image.src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg";        

};


$scope.GetNextNodes();

这是我的Html

<div id="page-wrapper">

    <div class="main-dropdown">
        <span>Nombre:</span>

        <input id="txtCustomComments" name="Comment" value="zona" placeholder="Custom comments here" class="pls-select-comments" type="text">
        <button name="btn-apply" id="btnApplyComments" value="apply" class="comment-apply-btn" ng-click="addRectangleToCanvas()">
            Agregar
        </button>
    </div>

    <div class="font-setting">
        <div class="row">
            <div class="color-picker">
                <span>Font Color:</span>
                <input id="btnColor" class="wmc-font-color" name="favcolor" value="#FF0000" type="color">
            </div>
            <div class="main-font-size">
                <span>Font Size:</span>
                <input id="bntfontsize" class="wmc-font-size" min="6" max="72" step="2" value="20" type="number">
            </div>
        </div>
    </div>
    <br />
    <br/>
    <canvas id="canvas" style="border:1px solid #d3d3d3;" />

</div>

Answer 1

您似乎正在使用

在addRectangleToCanvas函数中重新声明画布

var canvas = new fabric.Canvas('canvas', { selection: true });

线。尝试保留getNextNodes函数的引用，然后对其进行操作

var canvas;
$scope.GetNextNodes = function () {
    canvas = new fabric.Canvas('canvas');
    //...
}

$scope.addRectangleToCanvas = function () {
    canvas.add... // Do whatnot here with the canvas w/o redeclaring
}

Answer 2

声明$ scope范围内的变量有帮助。

$scope.commentRectange;
$scope.commentText;
$scope.canvas = new fabric.Canvas('wmcCanvas', {
    selection: true
});
$scope.colorPicker = $('#btnColor');
$scope.fontPicker = $('#bntfontsize');
$scope.image = new Image();
$scope.imageComp;
$scope.oImg;
$scope.group;

绘制一个保留图像的矩形

2 个答案: