Как я могу включить scrach или fill с цветным эффектом на холсте на устройствах с сенсорным экраном? - PullRequest
Новая
       9

Как я могу включить scrach или fill с цветным эффектом на холсте на устройствах с сенсорным экраном?

0 голосов
/ 04 ноября 2019

Как включить эффект царапин или заливки цветным эффектом на холсте в устройствах с сенсорным экраном? Так же, как он работает, когда я нажимаю на него. Я хочу сделать это при наведении. И я хочу показать предупреждение после скульптуры, заполненной цветом.

Возможно ли все это с помощью этого кода?

Я сделал что-то вроде этого: https://codepen.io/santanup789/pen/vYYdLzo

var url = 'http://colorgraphicz.biz/demo/colorgraphicz/wp-content/uploads/2019/11/New-Project2.jpg';
var canvas = document.getElementById('canvas');
var parentDiv = document.getElementById('parentBox');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = url;
img.onload = function () {
  var width = Math.min(500, img.width);
  var height = img.height * (width / img.width);

  canvas.width = width;
  canvas.height = height;
  ctx.drawImage(img, 0, 0, width, height);
};

var old = null;
canvas.addEventListener('mousedown', function (e){
  isPress = true;
  old = {x: e.offsetX, y: e.offsetY};
});
canvas.addEventListener('mousemove', function (e){
  if (isPress) {
    var x = e.offsetX;
    var y = e.offsetY;
    ctx.globalCompositeOperation = 'destination-out';
    ctx.beginPath();
    ctx.arc(x, y, 20, 0, 2 * Math.PI);
    ctx.fill();

    ctx.lineWidth = 10;
    ctx.beginPath();
    ctx.moveTo(old.x, old.y);
    ctx.lineTo(x, y);
    ctx.stroke();

    old = {x: x, y: y};
    
  }
});

// fitToContainer(canvas);
// function fitToContainer(canvas){
//   // Make it visually fill the positioned parent
//   canvas.style.width ='100%';
//   canvas.style.height='100%';
//   // ...then set the internal size to match
//   canvas.width  = canvas.offsetWidth;
//   canvas.height = canvas.offsetHeight;
// }

canvas.addEventListener('mouseup', function (e){
  isPress = true;
});
.box {
  display: inline-block;
  background: url("http://colorgraphicz.biz/demo/colorgraphicz/wp-content/uploads/2019/10/bg.png");
  background-size: contain;
  position: relative;
  width: 510px;
  height: 335px;
  box-shadow: 0 0 10px #ccc;
  border-radius: 5px;
}
.box img {
    width: 200px;
    position: absolute;
    top: 60%;
    left: 51%;
    transform: translate(-50%, -50%);
}
canvas {
  background: transparent;
  position: absolute;
  top: 60%;
  left: 51%;
  transform: translate(-50%, -50%);
  opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" id='parentBox'>
  <img src="http://colorgraphicz.biz/demo/colorgraphicz/wp-content/uploads/2019/10/cg.png" />
    <canvas id="canvas"></canvas>
</div>
...