Я пытаюсь создать визитную карточку на холсте, когда пользователь вводит идентификатор

Question

Я пытаюсь создать визитную карточку на холсте, когда пользователь вводит идентификатор

1

Я пытаюсь создать визитную карточку на основе ввода ID, который будет перебирать мой объект и получать связанные данные при нажатии кнопки. Я хочу показать поля в объекте на элементе холста. Первоначально я думал показать его на холсте, который создает пространство по умолчанию для того, что я добавил код для fillText. Мне сложно организовать его в браузере. Мне кажется, мне нужно добавить CSS и играть по высоте и ширине. Может ли кто-нибудь указать мне, что лучше всего подходит.
Более того, при чтении блога на Canvas-Sitepoint я узнал, что мы можем добавлять несколько форм с использованием Canvas API, таких как прямоугольник. Поскольку вместо того, чтобы показывать данные карты на холсте, я пытался добавить прямоугольную форму, сделать ее прозрачной и добавить данные в этот прямоугольник, чтобы она была более интерактивной. Мне нужно руководствоваться этим.

var details = {
  "Employees": [{
    "ID": "Winterfall",
    "FirstName": "John",
    "LastName": "Snow",
    "email": "[email protected]",
    "call": 121212,
    "Work": [{
      "company": "Google",
      "Designation": "Principle Architect"
    }]
  }, {
    "ID": "Castly Rock",
    "FirstName": "Tyrion",
    "LastName": "Lannister",
    "email": "[email protected]",
    "call": 111111,
    "Work": [{
      "company": "Amazon",
      "Designation": "Vice President"
    }]
  }, {
    "ID": "High Garden",
    "FirstName": "Samuel",
    "LastName": "Tally",
    "email": "[email protected]",
    "call": 777777,
    "Work": [{
      "Company": "Yahoo",
      "Designation": "Consultant"
    }]
  }]
};


function getEmployeeData() {
  var self = details,
    arr = [],
    value = document.getElementById("inputElement").value,
    isEmpId = self.Employees,
    len = isEmpId.length;

  for (var i = 0; i < len; i++) {
    if (value === isEmpId[i].ID) {
      var name = isEmpId[i].FirstName + " " + isEmpId[i].LastName
      call = isEmpId[i].call, email = isEmpId[i].email, company = isEmpId[i].Work[0].company,
        title = isEmpId[i].Work[0].Designation;
      drawCard(name, title, company, email, call);
      return true;
    }
  }

};

function drawCard(m, n, o, p, q) {

  var canvas = document.getElementById("rectangleCanvas");
  var context = canvas.getContext("2d");

  //context.textAlign = "center"
  context.fillText(m, 100, 100);
  context.fillText(n, 200, 50);
  context.fillText(o, 300, 60);
  context.fillText(p, 400, 70);
  context.fillText(q, 500, 80);
  //drawText(320, 080, "DEEPAK DWIJ", "rgb(80,80,80)");

  // var x = 20, y = 80, width=100, height=80; 

  // var shape = new Path2D();
  // shape.rect(x+100,y-50,width-40,height);

  // context.fillStyle = "#00695c";
  // context.fill(shape);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h4>Business card</h4>
<input type="text" id="inputElement" placeholder="Enter employee id">
<button id="button" onclick="getEmployeeData()">Click to get Data</button>
<br>
<hr>
<div>
  <canvas id="rectangleCanvas" height="300" width="500" style="border: solid 1px black;"></canvas>
</div>

Megh 22 сен. 2017, в 17:49

Источник

Теги:

javascript

css

html5

html5-canvas

1 ответ

Ещё вопросы

Locoluis · Answer 1 · 2017-09-22T13-39-00.000Z

Холст HTML5 - это просто растровое изображение. Вы не добавляете фигуры и текст в холст, вы не можете манипулировать ими через CSS; вы просто рисуете их на холсте в указанных координатах.

Это приводит к тому, что в любое время, когда вам нужно изменить, например, текст, отображаемый на холсте, вам нужно перерисовать все. Ваша функция drawCard должна это сделать.

Кроме того, IMHO, любая форма на холсте, которая не динамическая, не должна быть нарисована с использованием кода; скорее, это должно быть на статическом изображении, которое вы рисуете поверх холста перед рисованием текста и других динамических фигур.

var backgroundImage = new Image();
backgroundImage.src = "URL_of_your_image.png";

function drawCard(m, n, o, p, q){
  var canvas = document.getElementById("rectangleCanvas");
  var context = canvas.getContext("2d");
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(backgroundImage, 0, 0);

  // Draw the text etc.
}

Прежде чем писать какой-либо код, вы должны заранее разработать схему карты; например, на листе графовой бумаги, вы решаете, где все идет, обратите внимание на положение и размеры каждого прямоугольника, в который вы собираетесь поместить каждый текстовый элемент. Сначала проектируйте, внедрите позже; пытаясь сделать то и другое, вы будете тратить много времени.

Для правильной компоновки текста вам может понадобиться использовать метод context.measureText(), прежде чем нарисовать текст в холсте. Это необходимо для:

Многострочный текст
Редактируемый текст, который может не соответствовать ширине вашего окна
Сложная компоновка текста для таких скриптов, как арабский и деванагари.

Для постоянного просмотра вам не следует полагаться на стандартные шрифты, установленные на пользовательском компьютере; скорее, вы должны рассмотреть возможность использования веб-шрифтов. Вы должны использовать Web Font Loader, чтобы гарантировать, что шрифт загружен, прежде чем нарисовать текст.