0

var canvas=document.getElementById("canvas");
image = new Image();
image.src = 'https://d13yacurqjgara.cloudfront.net/users/4094/screenshots/2846992/drib106_1x.jpg';
image.onload = function() {
ctx.drawImage(image, 0, 0);
$(canvas).css('background-image', 'url(https://d13yacurqjgara.cloudfront.net/users/413551/screenshots/2846695/06_img_dribbble_2_2_1x.jpg)');
};
var ctx=canvas.getContext("2d");
var lastX;
var lastY;
var strokeColor="red";
var strokeWidth=5;
var mouseX;
var mouseY;
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var isMouseDown=false;


function handleMouseDown(e){
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // Put your mousedown stuff here
  lastX=mouseX;
  lastY=mouseY;
  isMouseDown=true;
}

function handleMouseUp(e){
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // Put your mouseup stuff here
  isMouseDown=false;
}

function handleMouseOut(e){
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // Put your mouseOut stuff here
  isMouseDown=false;
}

function handleMouseMove(e){
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);
  // Put your mousemove stuff here
  if(isMouseDown){
    ctx.beginPath();
    ctx.globalCompositeOperation="destination-out";
    ctx.arc(lastX,lastY,8,0,Math.PI*2,false);
    ctx.fill();
    lastX=mouseX;
    lastY=mouseY;
  }
}

$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});

var mode="pen";
$("#pen").click(function(){ mode="pen"; });
$("#eraser").click(function(){ mode="eraser"; });
#canvas:hover {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="300" height="300"></canvas>

У меня уже есть готовый canvas и функция для очистки картинки и показа нижнего слоя картинки.
Просто помогите мне изменить форму области очистки курсора(сейчас он круглый) на произвольный(если это возможно).
введите сюда описание изображения
И чтобы на мобильниках(на сенсоре) сработало (при двойном нажатии или при долгом нажатии) а то сейчас на сенсорах только прокрутка происходит вместо очистки.

6
  • круг рисуется вызовом ctx.arc(lastX,lastY,8,0,Math.PI*2,false); - вместо него можно нарисовать любую фигуру и так же залить
    – Grundy
    20 июл 2016 в 8:37
  • @Grundy я не знаю как, может копируя мой код, измените мою форму на прямоугольник с плавными краями например? 20 июл 2016 в 8:48
  • я не знаю что это с фигура и как ты ее получил :)
    – Grundy
    20 июл 2016 в 8:49
  • @Grundy не объязательно такой как на картинке, это я просто сам нарисовал для примера. Вы можете сделать просто прямоугольник с плавными краями 20 июл 2016 в 8:53
  • что значит с плавными краями?
    – Grundy
    20 июл 2016 в 8:58

1 ответ 1

1

Немного поискав в интернете способы рисования, сам решил свой вопрос. Если кому понадобится, решения в этом коде. Также он работает на сенсоре.

var canvas=document.getElementById("canvas");
image = new Image();
image.src = 'https://d13yacurqjgara.cloudfront.net/users/4094/screenshots/2846992/drib106_1x.jpg';
image.onload = function() {
ctx.drawImage(image, 0, 0);
//ctx.drawImage(image, 20, 39, 170, 140, 13, 15, 171, 142);
$(canvas).css('background-image', 'url(https://d13yacurqjgara.cloudfront.net/users/413551/screenshots/2846695/06_img_dribbble_2_2_1x.jpg)');
};
var ctx=canvas.getContext("2d");
var lastX;
var lastY;
var strokeColor="red";
var strokeWidth=5;
var mouseX;
var mouseY;
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var isMouseDown=false;
var objW = 60;
var objH = 30;
var objR = 15;

function roundedRect(ctx,x,y,width,height,radius){
  ctx.beginPath();
  ctx.globalCompositeOperation="destination-out";
  ctx.moveTo(x,y+radius);
  ctx.lineTo(x,y+height-radius);
  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
  ctx.lineTo(x+width-radius,y+height);
  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
  ctx.lineTo(x+width,y+radius);
  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
  ctx.lineTo(x+radius,y);
  ctx.quadraticCurveTo(x,y,x,y+radius);
  ctx.stroke();
  ctx.fill();
}

function handleMouseDown(e){
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // Put your mousedown stuff here
  lastX=mouseX;
  lastY=mouseY;
  roundedRect(ctx,lastX,lastY,objW,objH,objR);
  isMouseDown=true;
}

function handleMouseUp(e){
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // Put your mouseup stuff here
  isMouseDown=false;
}

function handleMouseOut(e){
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // Put your mouseOut stuff here
  isMouseDown=false;
}

function handleMouseMove(e){
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);
  // Put your mousemove stuff here
  if(isMouseDown){
    roundedRect(ctx,lastX,lastY,objW,objH,objR);
    //ctx.arc(lastX,lastY,8,0,Math.PI*2,false);
    lastX=mouseX;
    lastY=mouseY;
  }
}
canvas.addEventListener("touchstart", function (e) {
        mousePos = getTouchPos(canvas, e);
  var touch = e.touches[0];
  var mouseEvent = new MouseEvent("mousedown", {
    clientX: touch.clientX - (objW / 2),
    clientY: touch.clientY - (objH / 2)
  });
  canvas.dispatchEvent(mouseEvent);
}, false);
canvas.addEventListener("touchend", function (e) {
  var mouseEvent = new MouseEvent("mouseup", {});
  canvas.dispatchEvent(mouseEvent);
}, false);
canvas.addEventListener("touchmove", function (e) {
  var touch = e.touches[0];
  var mouseEvent = new MouseEvent("mousemove", {
    clientX: touch.clientX - (objW / 2),
    clientY: touch.clientY - (objH / 2)
  });
  canvas.dispatchEvent(mouseEvent);
}, false);

// Get the position of a touch relative to the canvas
function getTouchPos(canvasDom, touchEvent) {
  var rect = canvasDom.getBoundingClientRect();
  return {
    x: touchEvent.touches[0].clientX - rect.left,
    y: touchEvent.touches[0].clientY - rect.top
  };
}
// Prevent scrolling when touching the canvas
document.body.addEventListener("touchstart", function (e) {
  if (e.target == canvas) {
    e.preventDefault();
  }
}, false);
document.body.addEventListener("touchend", function (e) {
  if (e.target == canvas) {
    e.preventDefault();
  }
}, false);
document.body.addEventListener("touchmove", function (e) {
  if (e.target == canvas) {
    e.preventDefault();
  }
}, false);

$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});
#canvas:hover {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="300" height="300"><p>К сожалению, ваш браузер не поддерживает данную функцию. Мы рекомендуем вам обновить ваш браузер или установить другой.</p></canvas><br>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.