Question

我的代码包含一个占视图端口85％的div，它包含一个画布。我目前已经使画布可以滚动点击，但出于某种原因，我随时调用canvas.style.transform =“scale（2,2）”;画布尺寸保持不变。有什么帮助吗？

编辑 - 我正在调用scaleUp（）函数中的缩放调用

<!--Div to view, div to zoom, div to translate -->
<div id="view-translate" style="height:85vh; background-color:#f2f2f2; overflow:hidden; ">
	<canvas id="ctx" height="4000" width="4000" oncontextmenu="return false;" style="background-color:#ffffff;"></canvas>
</div>

<p id="text"></p>
<button onclick="scaleUp()">yes</button>

<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>

<script>
	//NETWORK VARIABLES
	var socket = io();
	//GETTING HTML ITEMS BY ID
	var tran = document.getElementById("view-translate");
	
	var canvas = document.getElementById("ctx");
	ctx = canvas.getContext("2d");

	
	//canvas.style.transform = "scale(2,2)";
	//canvas.style.transform = "translate(0px,0px)";	
	
	
	var tx = 0,//release x and y
	ty = 0,
	cx = 0,//click x and y
	cy = 0,
	mx= 0,//move x and y
	my = 0,
	scale = 1,
	draggable = false;
	
	ctx.fillStyle="red";
	ctx.fillRect(0,0,4,4);
	
	function scaleUp(){

		
	}
	
	//GETTING THE MOUSE X AND Y
	function getMousePos(canvas, event){
		var rect = canvas.getBoundingClientRect();
		return {
			x:event.clientX - rect.left,
			y:event.clientY - rect.top
		};
	}
	
	canvas.addEventListener('mousedown', function(event){
		
		var pos = getMousePos(canvas, event);
		
		cx = pos.x;
		cy = pos.y;
		
		if(event.which === 3){
			draggable = true;
			
		}
		
		if(event.which === 1){
			alert(cx + " " + cy);
		}
		
		if(event.which === 2){
		}

	}, false );
	
	tran.addEventListener('mousedown', function(event){
		
		var pos = getMousePos(tran, event);
		
		
		if(event.which === 3){
		}
		
		if(event.which === 1){
		
		}
		
		if(event.which === 2){
		}

	}, false );
	
	tran.addEventListener('mouseup', function(event){
		
		if(event.which === 3){
			draggable = false;
		}
		
		if(event.which === 1){

		}
		
		if(event.which === 2){

		}


	}, false );
	
	tran.addEventListener('mousemove', function(event){
		
		var pos = getMousePos(tran, event);
		mx = pos.x;
		my = pos.y;
		
		document.getElementById("text").innerHTML = mx + ", " + my + " size:" + canvas.height + " " + canvas.width;
		
		if(draggable){
			tx = mx - cx;
			ty = my - cy;
			
			document.getElementById("text").innerHTML = "CLICK!" + tx + ", " + ty;
			
			canvas.style.transform = "translate(" + tx + "px, " + ty + "px)";
		}
	
	}, false);
	
	
	
</script>

</html>

Answer 1

HTML5 Canvas的.scale方法实际上并未调整画布大小。它所做的只是影响将来在画布上绘制的内容这是它如何工作的一个很好的例子 https://www.w3schools.com/tags/canvas_scale.asp 如您所见，原始矩形保持相同的大小，但第二个大小是原来的两倍。

您需要直接更改画布的高度和宽度。这样的事情应该做到这一点 Resize HTML5 canvas to fit window

画布规模麻烦与css3

1 个答案: