javascript - 当用户在屏幕上拖动/平移时 Canvas 清晰

Question

我面临着一个我真的不知道从哪里开始解决的问题，所以我希望这个问题不要太宽泛。

我正在制作并在屏幕上应用它，我将有一个包含一些信息的矩形(假设它是一个 <ion-grid> )并且我需要用另一个矩形覆盖那个矩形，所以当用户滑动它的手指时屏幕，它会揭示其背后的内容。

想到的第一个解决方案是使用 Canvas ，并且我看到了一些通过单击从 Canvas 矩形中删除圆圈的示例。情况是我对 Canvas 一无所知，而且我没有要共享的代码，我会尝试一些东西，然后编辑我的问题。

第二个解决方案是一个(丑陋的)变通方法，它是这样的:

<ion-grid>
  <ion-row>
    <ion-col width-5 (pan)='somethingToHideTheCol()'></ion-col> //width-5 or less
  </ion-row>
</ion-grid>

因此 <ion-col>被平移它会调用一个函数来隐藏它或将背景更改为透明。

第二种解决方案不会模仿用户的手指形状，它会更难看，但也许可行。第一个带有 Canvas 的解决方案会更好，但我不知道从哪里开始，所以:

• 我该怎么做？
• 是否可以将 Canvas 与 Ionic 2 一起使用？
• 如何通过 javascript 抓取用户在屏幕上滑动/拖动他的手指？
• 有没有比这两个更好的解决方案？比如绘图库或类似的东西。

任何想法、代码、链接、教程都是有帮助的。谢谢:)

编辑

这是我想要创建的效果:

因此当用户触摸并在屏幕上拖动他的手指时，它会删除 Canvas 的一部分。

Answer 1

Canvas 确实是要走的路:)您所要做的就是在您的元素上放置一个 Canvas ，填充 Canvas 的背景，然后使用 CompositeOperations 来移除部分背景:

var CanvasHide = function(settings) {
  this.mouseDown = false;
	this.el = document.querySelectorAll("*[data-canvas-hide]");
	this.init = function() {
  	var self = this;
  	for (var i=0, l=this.el.length; i<l; i++) {
    	self.addCanvas(this.el[i]);
    }
  }
  
  this.addCanvas = function(el) {
    var self = this;
  	var canvas = document.createElement("canvas");
    canvas.width = el.offsetWidth;
    canvas.height = el.offsetHeight;
    el.appendChild(canvas);
    ctx = canvas.getContext("2d");
    ctx.fillStyle = "#666";
    ctx.fillRect(0,0,canvas.width, canvas.height);
    canvas.onmousedown=function(){self.mouseDown=true;};
    canvas.onmouseup=function(){self.mouseDown=false;};
    canvas.onmousemove = function(e) {
      if (self.mouseDown) {
        var x = e.pageX;
        var y = e.pageY;
        ctx.fillStyle = "#fff";
			  ctx.globalCompositeOperation = 'destination-out'
			  ctx.beginPath();
        ctx.arc(x - settings.radius/2, y - settings.radius/2, settings.radius, 0, 2 * Math.PI, false);
        ctx.fill();
      }
    }
  }
  
  this.init();
}

var canvasHide = new CanvasHide({radius:20});

*[data-canvas-hide] {
  position: relative;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
}

<div class="container" data-canvas-hide>
<h1>
Title
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In commodi odio, incidunt saepe aperiam nam rerum at ex consequatur tempora quae temporibus. Odio, facere repudiandae suscipit doloribus autem unde tempore qui earum illum, minima consequatur officia repellat labore, doloremque eveniet amet eligendi quam aspernatur quisquam inventore pariatur temporibus. Ducimus adipisci numquam quaerat. Atque doloremque nostrum blanditiis dicta repellendus, provident, dolorum modi praesentium perferendis animi ab. Eaque totam itaque quo provident ea sint explicabo dicta adipisci doloremque ipsam, voluptate. Quisquam maxime ipsa fugit magnam tempora, exercitationem minus. Amet doloremque vero consequuntur perferendis voluptate perspiciatis eaque, assumenda inventore, quibusdam molestias obcaecati quis.</p>
</div>

编辑:要使其在触摸设备上工作，您需要将 mousevents 更改为 touchevents。