드래그 가능한 이미지에 캔버스 그리기

debugcn 에 게시 Dev

NewBee

드래그 가능한 이미지가있는 html 페이지에서는 마우스 포인터를 사용하여 도형이나 선을 그려야하고, 드래그 가능한 이미지에서는 그리기 이미지와 도형이 완료되지 않습니다. 또한 사용자가 이미지를 이동하면 이전에 그린 도형이 그대로 유지
됩니다. 한편, 모양을 만들고 선을 그릴 수 있었지만
이미지 위에 선을 그리려고 하면 배경으로 돌아갑니다. 누군가가
캔버스와 html5를 사용하여 동일한 결과를 얻을 수있는 방법을 제안 할 수 있습니까 ?

상표

한 가지 방법은 이미지와 해당 이미지와 관련된 모양을 모두 그리는 함수를 만드는 것입니다.

이미지 오프셋과 동일한 오프셋으로 도형을 그려 이미지와 이미지의 도형을 조정 된 상태로 유지할 수 있습니다. 따라서 [x, y]에 이미지를 그리면 모양의 각 점에 x와 y를 추가합니다.

// points[] is an array of points that defines the shape you
// want drawn on your image

function drawImageWithShapes(img,points,x,y){
    ctx.drawImage(img,x,y);
    ctx.beginPath();
    ctx.moveTo(points[0].x+x,points[0].y+y);
    for(var i=1; i<points.length;i++){
        ctx.lineTo(points[i].x+x,points[i].y+y);
    }
    ctx.stroke();
}

여기에 이미지 설명 입력

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

ctx.lineWidth=4;
ctx.strokeStyle='red';

var x=50;
var y=50;

var points=[];
points.push({x:37,y:0});
points.push({x:75,y:75});
points.push({x:0,y:75});
points.push({x:37,y:0});


var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/sun.png";
function start(){
  drawImageWithShapes(img,points,x,y);
}

function drawImageWithShapes(img,points,x,y){
  ctx.drawImage(img,x,y);
  ctx.beginPath();
  ctx.moveTo(points[0].x+x,points[0].y+y);
  for(var i=1; i<points.length;i++){
    ctx.lineTo(points[i].x+x,points[i].y+y);
  }
  ctx.stroke();
}

$('#test').click(function(){
  x+=10;
  y+=10;
  ctx.clearRect(0,0,cw,ch);
  drawImageWithShapes(img,points,x,y);

});

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id=test>Move and Redraw</button><br><br>
<canvas id="canvas" width=300 height=300></canvas>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-1

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

드래그 가능한 이미지에 캔버스 그리기

드래그 가능한 이미지에 캔버스 그리기

캔버스에 드래그 가능한 여러 원 만들기

크기가 조정 된 캔버스에 이미지 그리기

캔버스에 이미지 / 그리기 가능이 표시되지 않음

드래그 가능한 이미지가 캔버스 안에 들어오지 않음

캔버스에 동일한 이미지 다시 그리기

선택한 캔버스에 그리기

캔버스에서 플라스크로 그리기 이미지 가져 오기

캔버스가 기본 이미지 그리기에서 작동하지 않음

캔버스 이미지에 이미지 드래그 앤 드롭

캔버스에 이미지를 그리고 텍스처로 돌아 가기

캔버스에 크기 조정 가능한 사각형 그리기

드래그 / 줌시 이미지가 테두리 / 캔버스 안에 유지되지 않습니다.

한 페이지에 여러 캔버스 그리기

Android 이상한 그리기 캔버스 버그?

Python-캔버스에 이미지가 그려지지 않음

WPF-캔버스에 이미지 만들기 및 그리기

버퍼링 된 이미지의 드래그 가능한 모양

jQuery-드래그 가능한 항목 HTML 스타일 버그 + 원래 컨테이너로 되돌리기

두 이미지의 차이를 캔버스에 그리기

Android / Java에서 이미지 위에 캔버스로 그리기

캔버스가 이미지를 그리지 않습니다.

캔버스 이미지 비트 맵에 원터치 그리기

HTML5 캔버스에 이미지 그리기

캔버스에 정사각형 이미지 그리기

캔버스에 그리드를 그릴 때 그리드 크기

캔버스에 그리기 메모리 증가

Tkinter : 캔버스를 드래그 가능하게 만들기

이미지 미리보기가있는 드래그 가능한 분할보기

리소스 파일에서로드되고 Grapics32로 크기가 조정되고 캔버스에 그려진 투명한 PNG 이미지