Question

我尝试编写的应用程序让用户将图像上传到画布，然后在其上绘制线条。到目前为止，我已经向下上传到画布以及绘制线条，除了每当我在画布上绘制线条时，上传的图像都会消失。在下面，您将看到我目前为该应用程序提供的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

Answer 1

使用IntPtr edithWnd = FindWindowEx(hWnd, IntPtr.Zero, "WindowsForms10.EDIT.app.0.141b42a_r12_ad1", null); IntPtr nextHnd = edithWnd; IntPtr editWnd = FindWindowEx(hWnd, nextHnd, "WindowsForms10.EDIT.app.0.141b42a_r12_ad1", null); IntPtr nextHnd1 = editWnd; IntPtr editWnd1 = FindWindowEx(hWnd, nextHnd1, "WindowsForms10.EDIT.app.0.141b42a_r12_ad1", null); IntPtr nextHnd2 = editWnd1; IntPtr editWnd2 = FindWindowEx(hWnd, nextHnd2, "WindowsForms10.EDIT.app.0.141b42a_r12_ad1", null);加载图像，然后使用fabric.Image.fromURL添加到画布。

演示

canvas.add()

//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

画布背景图像在绘制时会清除

1 个答案: