触摸事件在canvas.js的画布中不起作用

时间:2016-04-22 04:54:51

标签: javascript jquery canvas html5-canvas fabricjs

我正在使用fabric.js将图片上传到画布,但我想让上传的图片可以触摸。意味着,任何用户想要在平板电脑和可触摸设备中使用它都会起作用吗?

var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function (f) {
    var data = f.target.result;                    
    fabric.Image.fromURL(data, function (img) {
      var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9);
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
    });
  };
  reader.readAsDataURL(file);
});
canvas{
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file"><br />
<canvas id="canvas" width="450" height="450"></canvas>

我想让上传的图片可以触摸。但是现在只用光标工作。

的jsfiddle:

https://jsfiddle.net/varunPes/jru2d1pj/1/

如果可以触摸,请告诉我。提前谢谢。

0 个答案:

没有答案