Question

我想在其中心显示矩形的id。

这是我的模特：

var rects = [
    [a,  20, w, h, 'Day of the week'],
    [a, 130, w, h, 'Final'],
    [a, 240, w, h, 'Direction'],
    [a, 350, w, h, 'GoSS'],
    [a, 460, w, h, 'Cyber'],
    [a, 570, w, h, 'Ultumate77'],
    [a, 680, w, h, 'Ami'],
    [a, 790, w, h, 'TestFasePartTwo'],
    [a, 900, w, h, 'HerHavzunDibiAyni']
];

此处是代码的外部链接：http://fiddle.jshell.net/c3538o0v/2/

我试过覆盖，但这不是我想要的。问题是我必须使用什么来自动将它放在中心而不用矩形中心矩形文本？

PS：我删除了重叠代码。

代码

var mydata = [{
  "name": "Name: Name Day of the Week",
  "version": "Version: 1.0.0",
  "LocalTimeZone": "Local Time Zone: CET",
  "country": "Country: NLD",
  "input": "Input: DateTime (Format see properties)<br>\n\
Current Date Time = System Date Time <br>\n\
Node Enabled = Y/N (Default Yes) <br>\n\
Language = EN (Default EN)",
  "properties": "Properties: DateTime Format = ISO 8601 (Default)<br> \n\
Current Date Time = System Date Time<br>\n\
CountryArea = +31 (NLD)<br>\n\
Time Zone = CET (Depends on Country/Area)<br>\n\
Daylight Saving = Y/N<br>\n\
DST Starts = (Depends on Country/Area)<br>\n\
DST Ends = (Depends on Country/Area)"

}, {
  "name": "Final",
  "text": "1001",
  "version": "1.2",
  "country": "NL"

}, {
  "name": "Direction",
  "text": "LucBen",
  "version": "1.5.8",
  "country": "CN"

}, {
  "name": "GoSS",
  "text": "55",
  "version": "5",
  "country": "BE"

}, {
  "name": "Cyber",
  "text": "KroOn",
  "version": "3.2.11",
  "country": "FR"

}, {
  "name": "Ultumate77",
  "text": "Nei",
  "version": "22",
  "country": "D"

}, {
  "name": "Ami",
  "text": "Da",
  "version": "1.0.0",
  "country": "VS"

}, {
  "name": "TestFasePartTwo-One",
  "text": "99ft22",
  "version": "0.0.1",
  "country": "CH"

}, {
  "name": "HerHavzunDibiAyni",
  "text": "GitteBag",
  "version": "1",
  "country": "TR"

}, {
  "name": "SPYH",
  "text": "500",
  "version": "1.1.1.1",
  "country": "BeneluxS"

}];

var a = 20;
var w = 150;
var h = 100;
var canvas = $('#NodeList').get(0);
var ctx = canvas.getContext('2d');

canvas.height = 0;

var rects = [
  [a, 20, w, h, 'Day of the week'],
  [a, 130, w, h, 'Final'],
  [a, 240, w, h, 'Direction'],
  [a, 350, w, h, 'GoSS'],
  [a, 460, w, h, 'Cyber'],
  [a, 570, w, h, 'Ultumate77'],
  [a, 680, w, h, 'Ami'],
  [a, 790, w, h, 'TestFasePartTwo'],
  [a, 900, w, h, 'HerHavzunDibiAyni']
];

for (var i = 0; i < rects.length; i++) {
  canvas.height = canvas.height + 110;
  ctx.fillStyle = "white";
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // rectangles opnieuw tekenen
  for (var j = 0; j < i; j++) {
    ctx.fillRect(rects[j][0],
                 rects[j][1],
                 rects[j][2],
                 rects[j][3]);
  }

  ctx.fillRect(rects[i][0],
               rects[i][1],
               rects[i][2],
               rects[i][3]);
}

$('#NodeList').click(function(e) {
  var x = e.offsetX,
      y = e.offsetY;

  for (var i = 0; i < rects.length; i++) {
    if (x > rects[i][0] && x < rects[i][0] + rects[i][2] &&
        y > rects[i][1] && y < rects[i][1] + rects[i][3]) {
      var canvas = document.getElementById('NodeDisplay');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

      $(".een").empty().append(mydata[i].name + '<br> ' + mydata[i].version + (mydata[i].LocalTimeZone ? '<br> ' + mydata[i].LocalTimeZone : "") + '<br> ' + mydata[i].country);

      $(".twee").empty().append(mydata[i].input);

      $(".vier").empty().append(mydata[i].properties);
    }
  }
});

html,
body {
  height: 100%;
  overflow: hidden;
  background-color: grey;
}
b {
  margin-left: 75px;
}
#container {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
a img {
  border: none;
}
.scrollbar {
  height: 1050px;
  border: 1px solid #000;
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
}
.content {
  width: auto;
  height: 100%;
}
#Display {
  float: left;
  margin-left: 248px;
}
.beeld {
  max-height: 301px;
  min-height: 301px;
  width: 600px;
  margin-left: 134px;
  overflow-y: auto;
  overflow-x: auto;
  position: absolute;
  text-align: center;
}
#NodeDisplay {
  float: left;
  height: 300px;
  width: 600px;
  margin-left: 133px;
}
#canvas-wrap {
  position: fixed;
  margin-left: 380px;
  float: left;
  position: fixed;
  margin-top: 435px;
}
#canvas-wrap canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0
}
.een {
  height: 120px;
  min-height: 150px;
  width: 600px;
  overflow-y: auto;
  overflow-x: auto;
  position: relative;
}
.twee {
  height: 120px;
  min-height: 150px;
  width: 600px;
  overflow-y: auto;
  overflow-x: auto;
  position: relative;
}
.drie {
  max-height: 70px;
  min-height: 150px;
  width: 600px;
  position: relative;
  overflow-y: auto;
  overflow-x: auto;
}
.vier {
  max-height: 70px;
  min-height: 145px;
  max-width: 600px;
  width: 600px;
  overflow-y: auto;
  overflow-x: auto;
  position: relative;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<b>Nodes</b>
<br>
<div class="scrollbar">
  <div class="content">
    <canvas id="NodeList" width="200" height="300">
    </canvas>
  </div>
</div>
<div class="Display" id="Display">
  <canvas id="NodeDisplay" width="300" height="300" style="border:2px solid black;"></canvas>
  <div id="overlayBeeld"></div>
  <div class="beeld" style="border:1px solid black;"></div>
</div>
<div id="canvas-wrap">
  <canvas width="600" height="600" style="border:2px solid black;"></canvas>
  <div id="overlay"></div>
  <div class="een" style="border:1px solid black;"></div>
  <div class="twee" style="border:1px solid black;"></div>
  <div class="drie" style="border:1px solid black;"></div>
  <div class="vier" style="border:1px solid black;"></div>
</div>

Answer 1

这有效（fiddle）：

var rects = [
    [a, 20, w, h, 'Day of the week'],
    [a, 130, w, h, 'Final'],
    [a, 240, w, h, 'Direction'],
    [a, 350, w, h, 'GoSS'],
    [a, 460, w, h, 'Cyber'],
    [a, 570, w, h, 'Ultumate77'],
    [a, 680, w, h, 'Ami'],
    [a, 790, w, h, 'TestFasePartTwo'],
    [a, 900, w, h, 'HerHavzunDibiAyni']
];

canvas.height = 110 * rects.length;
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.textAlign="center";
ctx.textBaseline = 'middle';
for (var i = 0; i < rects.length; i++) {
    ctx.fillStyle="white";
    ctx.fillRect(rects[i][0],
        rects[i][1],
        rects[i][2],
        rects[i][3]);
    ctx.fillStyle="black";
    ctx.fillText(rects[i][4], rects[i][0]+rects[i][2]/2, rects[i][1]+rects[i][3]/2);
}

您的代码有几个错误：

画布的大小始终在变化
您清除了外部循环中的画布，删除了目前为止渲染的所有内容

新内容：设置文本对齐方式使其围绕一个点（在本例中为矩形的中心）。

之后，我只需将文字颜色设置为black并调用

ctx.fillText(rects[i][4], rects[i][0]+rects[i][2]/2, rects[i][1]+rects[i][3]/2);

HTML5：矩形中的中心文本

代码

1 个答案: