画布上的图像阻止画布对象移动

Question

我正在开发一个应用程序，我的用户可以在其中向页面添加文本。除了中心的图像外，每一页都是空白画布。我目前能够放置 n 数量的文本元素并移动它们中的每一个，但是我无法在图像上移动文本元素。我只能在空白处移动图像周围的文本。

我的画布放置在 Razor 局部视图上，单击按钮时会以 Bootstrap 模式打开。

我使用 simon sarris 的画布演示作为我的基线：http://simonsarris.com/project/canvasdemo/demo1.html。我回到这个来构建小提琴。我在小提琴中将图像添加到画布的方式与我在应用程序中添加图像的方式相同。

我应该在哪里进行更改，以便能够将对象移动到画布上的任何位置？

小提琴： https://jsfiddle.net/4agpdx6q/2/

drawText 函数（替换演示中的 drawRect 函数）（所有计算都有效，我必须添加它以链接到小提琴。让您了解我的工作）。

// While draw is called as often as the INTERVAL variable demands,
// It only ever does something if the canvas gets invalidated by our code
function draw() {
    if (canvasValid == false) {
        clear(ctx);
        for (var i = 0; i < textObjects.length; i++) {
            drawText(ctx, textObjects[i]);

        }

        // Add stuff you want drawn on top all the time here
        handleAddRemoveButtonVisiblity();
        handleTextAreaOnSelection();
        canvasValid = true;
    }
}


function drawText(context, textObject) {
    if (textObject.x > WIDTH || textObject.y > HEIGHT) return;
    if (textObject.x < 0 || textObject.y < 0) return;

    context.font = textObject.fontStyle + " " + textObject.fontWeight + " " + textObject.fontSize + " " + textObject.fontFamily;
    context.textAlign = textObject.textAlignment;
    context.fillStyle = textObject.fillColor;
    // ***************************************
    // Draw text in a multi line.
    // ***************************************
    var textWidthDictionary = widthPerLine(textObject);
    var maxWidthOfLine = 0;
    for (textKey in textWidthDictionary) {
        var textWidthValue = textWidthDictionary[textKey];
        if (maxWidthOfLine < textWidthValue) {
            maxWidthOfLine = textWidthValue;
        }
    }
    //var maxWidthOfMultiLineText = maxWidthOfMultiLineText(textObject);
    var lineOffsetY = 0;
    // Loop over text lines. Each line has it's own Width which determines the xPosition.
    var xPosition = textObject.x;
    for (textKey in textWidthDictionary) {
        var textWidthValue = textWidthDictionary[textKey];
        var textLine = textKey;
        // If no Alignment buttons were clicked xPosition remains set to the original position.
        if (alignmentClicked) {
            // Alignment becomes Center from either Left or Right.
            if (textObject.textAlignment == "center") {
                // Left -> Center
                if (lastAlignment == "left") {
                    xPosition = xPosition + (maxWidthOfLine - textWidthValue) / 2;
                }
                // Right -> Center
                if (lastAlignment == "right") {
                    xPosition = xPosition - (maxWidthOfLine - textWidthValue) / 2;
                }
            }
            // Alignment becomes Right from either Left or Center.
            if (textObject.textAlignment == "right") {
                // Left -> Right
                if (lastAlignment == "left") {
                    xPosition = xPosition + maxWidthOfLine - textWidthValue;
                }
                // Center -> Right
                if (lastAlignment == "center") {
                    xPosition = xPosition + (maxWidthOfLine - textWidthValue) / 2;
                }
            }
            // Alignment becomes Left from either Right or Center.
            if (textObject.textAlignment == "left") {
                // Right -> Left
                if (lastAlignment == "right") {
                    xPosition = xPosition - (maxWidthOfLine - textWidthValue);
                }
                // Center -> Left
                if (lastAlignment == "center") {
                    xPosition = xPosition - (maxWidthOfLine - textWidthValue) / 2;
                }

            }
        }
        lineOffsetY += calculateWordDimensions(textObject.text).height;

        context.fillText(textLine, xPosition, textObject.y + lineOffsetY);
    }
}

提前致谢！

Answer 1

如果我理解你的问题，你想移动图片上的框（或文本）吗？

如果这是正确的，那么你的解决方案很简单

z-index: -1;

在您的 .selectedImage CSS 中，所以它位于 Text/Box 的后面。

小提琴：https://jsfiddle.net/4agpdx6q/3/