キャンバスブロックキャンバスオブジェクト上のイメージ移動

Question

ユーザーがページにテキストを追加できるアプリケーションで作業しています。各ページは空白のキャンバスで、中央の画像は除きます。私は現在、n個のテキスト要素を配置してそれぞれを移動することができますが、画像上のテキスト要素を移動することはできません。私は白い空白でイメージの周りのテキストを移動することができます。

私のキャンバスは、ボタンをクリックするとブートストラップモーダルとして開くRazor Partial Viewに配置されています。

私はベースラインとしてサイモンサリスのキャンバスデモを使用しました：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

質問を正しく理解していれば、画像上にボックス（またはテキスト）を移動したいのですか？

これが正しい場合は、あなたのソリューションは、あなたの.selectedImage CSSでシンプル

z-index: -1; 

あるので、テキスト/ボックスの後ろにあります。

フィドル：https://jsfiddle.net/4agpdx6q/3/