1
확대가 가능한 이미지 뷰어를 만들려고합니다. 확대/축소 비율이나 이미지 크기가 이미지가 더 이상 전체 캔버스에 칠해지지 않을 정도로 크면 특정 배경색으로 칠해진 이미지가 포함되지 않은 캔버스 영역을 갖기를 원합니다.캔버스의 이미지가 팬될 때 바둑판 모양의 흔적을 남깁니다.
내 현재 구현은 확대/축소 및 패닝을 허용하지만 이미지가 팬 조작 중에 바둑판 모양의 흔적을 남기는 원치 않는 효과가 있습니다 (게임에서 승리 할 때 Windows Solitaire의 카드와 유사). 이미지가 흔적을 남기지 않고 배경 사각형이 내 캔버스에서 제대로 렌더링되도록 캔바스를 정리하려면 어떻게합니까?
원하지 않는 효과 설정 배율을 어두운 회색 배경으로 표시되는 수준으로 다시 설정 한 다음 마우스로 이미지를 패닝 (마우스를 아래로 드래그)하십시오.
아래에 코드 스 니펫이 추가되었으며 거기에 대해 궁금한 사람들은 Plnkr 링크가 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
canvas{
border:solid 5px #333;
}
</style>
</head>
<body>
\t <button onclick="changeScale(0.10)">+</button>
\t <button onclick="changeScale(-0.10)">-</button>
\t
<div id="container">
<canvas width="700" height="500" id ="canvas1"></canvas>
</div>
<script>
var canvas = document.getElementById('canvas1');
var context = canvas.getContext("2d");
var imageDimensions ={width:0,height:0};
var photo = new Image();
var isDown = false;
var startCoords = [];
var last = [0, 0];
var windowWidth = canvas.width;
var windowHeight = canvas.height;
var scale=1;
photo.addEventListener('load', eventPhotoLoaded , false);
photo.src = "http://www.html5rocks.com/static/images/cors_server_flowchart.png";
function eventPhotoLoaded(e) {
imageDimensions.width = photo.width;
imageDimensions.height = photo.height;
drawScreen();
}
function changeScale(delta){
scale += delta;
drawScreen();
}
function drawScreen(){
context.fillRect(0,0, windowWidth, windowHeight);
context.fillStyle="#333333";
context.drawImage(photo,0,0,imageDimensions.width*scale,imageDimensions.height*scale);
}
canvas.onmousedown = function(e) {
isDown = true;
startCoords = [
e.offsetX - last[0],
e.offsetY - last[1]
];
};
canvas.onmouseup = function(e) {
isDown = false;
last = [
e.offsetX - startCoords[0], // set last coordinates
e.offsetY - startCoords[1]
];
};
canvas.onmousemove = function(e)
{
if(!isDown) return;
var x = e.offsetX;
var y = e.offsetY;
context.setTransform(1, 0, 0, 1,
x - startCoords[0], y - startCoords[1]);
drawScreen();
}
</script>
</body>
</html>
어쩌면 context.save'같은 것을(); context.fillRect (0,0, windowWidth, windowHeight); context.restore();'setTransform은 사용자가 채울 사각형을 변경하기 때문에. – Quarter2Twelve
정확합니다. 그 의견을 답으로 개발하고 싶다면 그 의견을 받아 들일 수있어서 기쁩니다. – mccainz