Рендеринг изображения относительно координат другого изображения с использованием Angular 4 Typescript - PullRequest
Новая
       27

Рендеринг изображения относительно координат другого изображения с использованием Angular 4 Typescript

0 голосов
/ 16 мая 2019

У меня есть два изображения, и я хочу, чтобы второе изображение было нарисовано в соответствии с координатами внутри первого изображения.Пока мой код: 

mergeImages() {
  var canvas: HTMLCanvasElement = this.canvas.nativeElement;
  var context = canvas.getContext('2d'); 
  let img1 = new Image();
  let img2 = new Image();
  img1.onload = function() {
    canvas.width = img1.width;
    canvas.height = img1.height;
    img2.src = 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/128/Map-Marker-Marker-Outside-Chartreuse.png';
  };
  img2.onload = function() {
    context.drawImage(img1, 0, 0);
    context.drawImage(img2, 0, 0);
  };
  img1.src = '../assets/dist/custom/img/ThirdFloor.png';
}

Проблема в том, что я хочу, чтобы мое изображение маркера отображалось с координатами относительно моего изображения этажа.Когда я делаю drawImage(img2,0,0), он отображает маркер в верхнем левом углу моего container. Я хочу, чтобы он нарисовал мой маркер inside мое изображение пола на top-left при выполнении drawImage(img2,0,0).

Как мнеДобейся этого?Любая помощь будет оценена. Attached is an image of the problem

Что-то вроде: Desired Output

...