Question

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

我的画布放在Razor Partial View上，在点击按钮时它作为Bootstrap Modal打开。

我使用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

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

如果这是正确的，那么您的解决方案就是一个简单的

observable
  .doOnNext(o -> {
      // Observable was given a value
   });

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

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

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

1 个答案: