Фоновое изображение холста очищается при его рисовании - PullRequest
Новая
       7

Фоновое изображение холста очищается при его рисовании

0 голосов
/ 03 июля 2018

В приложении, которое я пытаюсь написать, пользователь загружает изображение на холст, а затем рисует над ним линии. Пока у меня есть загрузка на холст и рисование линий, за исключением того, что всякий раз, когда я рисую линию на холсте, загруженное изображение исчезает. Ниже вы увидите HTML-код и код JavaScript, которые у меня есть для приложения. Различные элементы были получены из различных руководств, поэтому я предполагаю, что существует некоторая несовместимость, что они перезаписывают друг друга.

HTML 

<input type='file' id="fileUpload">
<canvas id="c" width = 750 height= 400 style="border:1px solid #ccc"></canvas>

Javascript 

// begin file upload block
function el(id) { return document.getElementById(id); } 

   var canvas = el("c");
   var context = canvas.getContext("2d");

   function readImage() {
       if (this.files && this.files[0]) {
           var FR = new FileReader();
           FR.onload = function (e) {
               var img = new Image();
               img.onload = function () {
                   context.drawImage(img, 0, 0,img.width,img.height,0,0,750,400);
               };
               img.src = e.target.result;
           };
           FR.readAsDataURL(this.files[0]);
       }
   }

   el("fileUpload").addEventListener("change", readImage, false);

//end file upload block

//begin line drawing block
var canvas = new fabric.Canvas('c', { selection: false });
var line, isDown;

canvas.on('mouse:down', function(o){
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
  line = new fabric.Line(points, {
    strokeWidth: 5,
    fill: 'red',
    stroke: 'red',
    originX: 'center',
    originY: 'center'
  });
  canvas.add(line);
});

canvas.on('mouse:move', function(o){
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  line.set({ x2: pointer.x, y2: pointer.y });
  canvas.renderAll();
});

canvas.on('mouse:up', function(o){
  isDown = false;
});

//end line drawing block

1 Ответ

0 голосов
/ 03 июля 2018

Используйте fabric.Image.fromURL для загрузки изображения, а затем добавьте на холст, используя canvas.add().

DEMO 

//begin line drawing block
var canvas = new fabric.Canvas('c', {
  selection: false
});
var line, isDown;

canvas.on('mouse:down', function(o) {
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  var points = [pointer.x, pointer.y, pointer.x, pointer.y];
  line = new fabric.Line(points, {
    strokeWidth: 5,
    fill: 'red',
    stroke: 'red',
    originX: 'center',
    originY: 'center'
  });
  canvas.add(line);
});

canvas.on('mouse:move', function(o) {
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  line.set({
    x2: pointer.x,
    y2: pointer.y
  });
  canvas.renderAll();
});

canvas.on('mouse:up', function(o) {
  isDown = false;
});

//end line drawing block

// begin file upload block
function el(id) {
  return document.getElementById(id);
}

function readImage() {
  if (this.files && this.files[0]) {
    var FR = new FileReader();
    FR.onload = function(e) {
      fabric.Image.fromURL(e.target.result, function(img) {
        img.set({
          left: 0,
          top: 0,
          evented: false
        });
        img.scaleToWidth(canvas.width);
        img.setCoords();
        canvas.add(img);
      })
    };
    FR.readAsDataURL(this.files[0]);
  }
}

el("fileUpload").addEventListener("change", readImage, false);
//end file upload block
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<input type='file' id="fileUpload">
<canvas id="c" width = 750 height= 400 style="border:1px solid #ccc"></canvas>
...