Languages

Menu
Sites
Language
how to scroll height and width of canvas image

Hi,

I have developed an application in which i put image on the canvas.I want to scroll the image when user want to scroll.How can i do this.

I have seen when the image are save in the gallery of mobile it is scrolling when user want.Like that i want to scroll the image of my application.

 

 

Please help me

Thanks and regards

Mohit Kumar

List

Responses

6 Replies
pius lee

I can't understand why you search more in the google?

It's really easy to implement draggable canvas, but too many way is exist on each situation.

If you want draw only one image on canvas and make it draggable, it's really easy.

but it's more difficult if you need many draggable object on canvas.

I made very simple source for only one draggable image on canvas.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
</head>
<style>
* {margin:0; padding:0;}
html, body { width:100%; height:100%;}
canvas { display:block }
</style>
<body>

<canvas id="draggable"></canvas>

<script>

window.addEventListener("load", function() {    
	var cv = document.getElementById("draggable");
	var ctx = cv.getContext('2d');

	cv.width = window.innerWidth;
	cv.height = window.innerHeight;

	var img = new Image();
	var xy = {x:0, y:0};
	var dirty = false;
	
	function on_draw() {
		if (dirty) {
			ctx.clearRect(0, 0, cv.width, cv.height);
			ctx.drawImage(img, xy.x, xy.y);
			dirty = false;
		}
	}

	function update() {
		on_draw();
		webkitRequestAnimationFrame(update);
	}

	img.onload = function() {
		xy.x = xy.y = 0;
		dirty = true;
		update();
	}
	img.src = "images/iron-man-wallpaper.jpg";

	var drag = {x:0, y:0, enable:false, mx:0, my:0};
	cv.addEventListener("mousedown", function(ev) {
		drag.enable = true;
		drag.x = ev.x;
		drag.y = ev.y;
	}, false);
	window.addEventListener("mousemove", function(ev) {
		if (drag.enable) {
			xy.x -= drag.x - ev.x;
			xy.y -= drag.y - ev.y;
			drag.x = ev.x;
			drag.y = ev.y;
			dirty = true;
		}
	}, false);
	window.addEventListener("mouseup", function(ev) {
		drag.enable = false;
	}, false);
	
}, false);

</script>
</body>
</html>

 

Marco Buettner

Because he has no idea for what he should search.

He has no knowledge of JS... 90% of his apps are copy+paste and written/adapt by this forum.

I will never write any line code for him, without he delivers his current way.

pius lee

( ͡° ͜ʖ ͡°) Take it easy bro, I think trolls appear obvious thing during rise of forum.

And I do not think he was even a troll yet. 

mohit kumar

Hi,

Thank u.I am new for TIZEN.I have developed 20+ TIZEN Application.This is my real problem which i asked on TIZEN fourm.

 

 

Please help me

Thanks and regards

Mohit Kumar

 

mohit kumar

Hi,

       Thank you so much

 

 

 

Thanks and regards

Mohit Kumar

mohit kumar

Hi,

This is not what i am asking for.I want my canvas image to zoom like below mobile image.It is zoom in and zoom out.Please dont consider entire image,please consider the image within mobile.I have searched but it is different.The same image in gallery of mobile get zooom,but in my application it not zoom.Please help me

 

 

I have developed 20 Tizen appplication.

Thanks and regards

Mohit Kumar