Question

我想在画布中间显示默认的“Dedication Text”。我真的无法确定坐标，也无法理解代码...

目前，我的奉献文字显示在此处：

如您所见，它显示在画布的左上角。

我想自动显示的位置在中间像这样：

我有这个从网上获得的代码：

 function updateTotal() {


        if (document.getElementById('design3').checked) {
          var canvas2 = document.getElementById("displaycake_text");
              context = canvas2.getContext("2d");

          var $canvas2 = $("#displaycake_text");
          var canvasOffset = $canvas2.offset();
          var offsetX = canvasOffset.left;
          var offsetY = canvasOffset.top;
          var scrollX = $canvas2.scrollLeft();
          var scrollY = $canvas2.scrollTop();
          var startX;
          var startY;
          var texts = []; // an array to hold text objects
          var selectedText = -1;// this var will hold the index of the hit-selected text

        function draw() { // clear the canvas & redraw all texts
          context.clearRect(0, 0, canvas2.width, canvas2.height);
            for (var i = 0; i < texts.length; i++) { var text = texts[i];
              context.fillText(text.text, text.x, text.y);  }
          }

        function textHittest(x, y, textIndex) { // test if x,y is inside the bounding box of texts[textIndex]
          var text = texts[textIndex];
            return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y);
            }

        function handleMouseDown(d) {
           d.preventDefault();
              startX = parseInt(d.clientX - offsetX);
              startY = parseInt(d.clientY - offsetY);
          
            for (var i = 0; i < texts.length; i++) {
              if (textHittest(startX, startY, i)) {
                selectedText = i; }  }
          }

        function handleMouseUp(d) { // done dragging
          d.preventDefault();
            selectedText = -1;  }

        function handleMouseOut(d) { // also done dragging
            d.preventDefault();
            selectedText = -1;  }

        function handleMouseMove(d) {
          if (selectedText < 0) { return; }
          d.preventDefault();
            mouseX = parseInt(d.clientX - offsetX);
            mouseY = parseInt(d.clientY - offsetY);

              var dx = mouseX - startX;
              var dy = mouseY - startY;
              startX = mouseX;
              startY = mouseY;
              var text = texts[selectedText];
              text.x += dx;
              text.y += dy;
              draw();     }
          
          $("#displaycake_text").mousedown(function (d) { handleMouseDown(d); }); // listen for mouse events
          $("#displaycake_text").mousemove(function (d) { handleMouseMove(d); });
          $("#displaycake_text").mouseup(function (d) {   handleMouseUp(d); });
          $("#displaycake_text").mouseout(function (d) {  handleMouseOut(d);  });
          $("#text_dedi").click(function () {
              var y = texts.length * 20 + 20; 
              var text = {  text: $("#dedi_text").val(),
                  x: 20,
              y: y
               };

            context.font = "30px Roboto";
            text.width = context.measureText(text.text).width;
            text.height = 16;
            text.color = "#ffffff";   
            texts.push(text); // put this new text in the texts array
            draw(); // redraw everything
          });
          
          //this is the code for CLEAR BUTTON
          document.getElementById('clear').addEventListener('click', function() {
          context.clearRect(0, 0, canvas2.width, canvas2.height);  
          texts = []; },
          false);
        }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="displaycake_text" height="300px" width="600px"> </canvas>

<!-- CLICK THE RADIO TO TRIGGER POST -->
<input type="radio" id="design3" name="design_3"  onchange="updateTotal()" /> Dedication 
 <h2> <div class="disp_dedi off"> <input type="text" size="15" id="dedi_text" name="dedicationT" placeholder="Dedication"> 
<button id="text_dedi"> Post </button>  <input type="button" value="Clear" id="clear" size="23" onchange="updateTotal()">

正如你所看到的，我可以拖动它......但是我会添加一些可以减少拖动部分的功能。

任何人都可以帮我指出哪些在JS代码中我可以设置默认发布的文本位置在中间某处？来源没有足够的评论让我理解。

谢谢你提前!!!

Answer 1

首先您需要使用画布的textAlign属性来对齐您要在画布上绘制的文本。
第二次您需要根据画布宽度/高度的一半设置fillText的{{1}}，x坐标，以便您可以放置画布中间的文字。所以，基本上你必须在现有的代码片段中添加/更改两行代码，这将是：

好消息是它会自动删除拖动部分。

＆＃13;

context.textAlign = 'center';
context.fillText(text.text, canvas2.width / 2, canvas2.height / 2);

＆＃13;

function updateTotal() {
    if (document.getElementById('design3').checked) {
        var canvas2 = document.getElementById("displaycake_text");
        context = canvas2.getContext("2d");
        var $canvas2 = $("#displaycake_text");
        var canvasOffset = $canvas2.offset();
        var offsetX = canvasOffset.left;
        var offsetY = canvasOffset.top;
        var scrollX = $canvas2.scrollLeft();
        var scrollY = $canvas2.scrollTop();
        var startX;
        var startY;
        var texts = []; // an array to hold text objects
        var selectedText = -1; // this var will hold the index of the hit-selected text
        function draw() { // clear the canvas & redraw all texts
            context.clearRect(0, 0, canvas2.width, canvas2.height);
            for (var i = 0; i < texts.length; i++) {
                var text = texts[i];
                context.textAlign = 'center';
                context.fillText(text.text, canvas2.width / 2, canvas2.height / 2);
            }
        }

        function textHittest(x, y, textIndex) { // test if x,y is inside the bounding box of texts[textIndex]
            var text = texts[textIndex];
            return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y);
        }

        function handleMouseDown(d) {
            d.preventDefault();
            startX = parseInt(d.clientX - offsetX);
            startY = parseInt(d.clientY - offsetY);
            for (var i = 0; i < texts.length; i++) {
                if (textHittest(startX, startY, i)) {
                    selectedText = i;
                }
            }
        }

        function handleMouseUp(d) { // done dragging
            d.preventDefault();
            selectedText = -1;
        }

        function handleMouseOut(d) { // also done dragging
            d.preventDefault();
            selectedText = -1;
        }

        function handleMouseMove(d) {
            if (selectedText < 0) {
                return;
            }
            d.preventDefault();
            mouseX = parseInt(d.clientX - offsetX);
            mouseY = parseInt(d.clientY - offsetY);
            var dx = mouseX - startX;
            var dy = mouseY - startY;
            startX = mouseX;
            startY = mouseY;
            var text = texts[selectedText];
            text.x += dx;
            text.y += dy;
            draw();
        }
        $("#displaycake_text").mousedown(function(d) {
            handleMouseDown(d);
        }); // listen for mouse events
        $("#displaycake_text").mousemove(function(d) {
            handleMouseMove(d);
        });
        $("#displaycake_text").mouseup(function(d) {
            handleMouseUp(d);
        });
        $("#displaycake_text").mouseout(function(d) {
            handleMouseOut(d);
        });
        $("#text_dedi").click(function() {
            var y = texts.length * 20 + 20;
            var text = {
                text: $("#dedi_text").val(),
                x: 20,
                y: y
            };
            context.font = "30px Roboto";
            text.width = context.measureText(text.text).width;
            text.height = 16;
            text.color = "#ffffff";
            texts.push(text); // put this new text in the texts array
            draw(); // redraw everything
        });
        //this is the code for CLEAR BUTTON
        document.getElementById('clear').addEventListener('click', function() {
            context.clearRect(0, 0, canvas2.width, canvas2.height);
            texts = [];
        }, false);
    }
}

＆＃13;

#displaycake_text {
  background-color: lightgrey;
}

＆＃13;

html5 Canvas在画布中显示默认区域

1 个答案: