1
Android의 브라우저가 클릭/프레스 이벤트에 응답하도록하는 특별한 방법이 있습니까? 내 코드는 인기있는 브라우저에서 잘 작동하지만 Android 태블릿이나 Android 휴대 전화를 사용하면 노드를 드래그/밀 때 이동하지 않습니다.android의 html5 canvas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#blurb_canvas {
position: absolute;
top: 0px;
left: 150px;
}
#blurb_data_holder {
height: 100%;
width: 150px;
top: 0px;
left: 0px;
overflow-y: auto;
}
input.blurb_btn {
background-color: #eaeaea;
font-weight: bold;
border: solid 1px #c5c5c5;
cursor: pointer;
width: 9em;
height: 2em;
padding: 5px;
}
</style>
<body onLoad="init();">
<table id="blurb_data_holder">
<tr>
<td align="center" valign="top">
<input type="submit" title="" value="Data 1" id="data_1" class="blurb_btn" onClick="createBlurbNode(this.id);"/> <br />
<input type="submit" title="" value="Data 2" id="data_2" class="blurb_btn" onClick="createBlurbNode(this.id);"/> <br />
<input type="submit" title="" value="Data 3" id="data_3" class="blurb_btn" onClick="createBlurbNode(this.id);"/> <br />
<input type="submit" title="" value="Data 4" id="data_4" class="blurb_btn" onClick="createBlurbNode(this.id);"/> <br />
<input type="submit" title="" value="Data 5" id="data_5" class="blurb_btn" onClick="createBlurbNode(this.id);"/> <br />
</td>
</tr>
</table>
<canvas id="blurb_canvas">If you are able to see this message, your browser does not support HTML5's canvas feature.</canvas>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var canvasLay;
var canvasContext;
var blurbNodes;
var x = 50;
var y = 50;
var movingObj = false;
var movinganotherObj = false;
var blurbSentences;
function init(){
canvasLay = document.getElementById('blurb_canvas');
canvasContext = canvasLay.getContext('2d');
canvasLay.width = window.innerWidth-150;
canvasLay.height = window.innerHeight;
blurbNodes = [];
blurbNodes.push(new BlurbNode(300,75,60,1,1,'stuff here a'));
blurbNodes.push(new BlurbNode(600,300,60,1,1,'stuff here b'));
setInterval(drawScreen,25);
canvasLay.addEventListener("mousedown", beginMovingObj, false);
canvasLay.addEventListener("mousemove", moveObj, false);
canvasLay.addEventListener("mouseup", stopMovingObj, false);
}
function createBlurbNode(text){
blurbNodes.push(new BlurbNode(100,100,60,1,1,text));
}
function BlurbNode(positionx, positiony, radius, dx, dy, label){
this.canvas = canvasLay;
this.context = canvasContext;
this.positionx = positionx;
this.positiony = positiony;
this.radius = radius;
this.dx = dx;
this.dy = dy;
this.label = label;
this.moving = false;
this.hasChild = false;
this.hasParent = false;
}
BlurbNode.prototype.Create = function(){
this.context.fillStyle = '#ff0000';
this.context.beginPath();
this.context.arc(this.positionx, this.positiony, this.radius, 0, Math.PI*2, true);
this.context.closePath();
this.context.fill();
this.context.fillStyle = '#000000';
this.context.fillText(this.label,this.positionx-20,this.positiony);
};
function drawLineConnection(parentCenterx, parentCentery, childCenterx, childCentery){
canvasContext.beginPath();
canvasContext.fillStyle = '#000000';
canvasContext.moveTo(parentCenterx, parentCentery);
canvasContext.lineTo(childCenterx, childCentery);
canvasContext.stroke();
}
function drawScreen(){
canvasLay.width = window.innerWidth-150;
canvasLay.height = window.innerHeight;
canvasContext.clearRect(0,0,screen.width,screen.height);
for(i = 0; i<blurbNodes.length; i++){
if(movingObj){
if(!movinganotherObj && (x > blurbNodes[i].positionx-50 && x < blurbNodes[i].positionx+50) && (y > blurbNodes[i].positiony && y < blurbNodes[i].positiony+50)){
blurbNodes[i].moving = true;
movinganotherObj = true;
}
if(blurbNodes[i].moving && x < (canvasLay.width-60) && y < (canvasLay.height-60) && x > (60) && y > (60)){
blurbNodes[i].positionx = x;
blurbNodes[i].positiony = y;
}
}else{
blurbNodes[i].moving = false;
}
if(!blurbNodes[i].hasChild && !blurbNodes[i].hasParent && !blurbNodes[i].moving && blurbNodes[i].positiony < canvasLay.height-60){
blurbNodes[i].positiony = blurbNodes[i].positiony + blurbNodes[i].dy;
}
blurbNodes[i].Create();
for(j = 0; j<blurbNodes.length; j++){
if(blurbNodes[i] != blurbNodes[j] &&
Math.abs(blurbNodes[i].positionx - blurbNodes[j].positionx) < 150 &&
Math.abs(blurbNodes[i].positiony - blurbNodes[j].positiony) < 150){
drawLineConnection(blurbNodes[i].positionx, blurbNodes[i].positiony, blurbNodes[j].positionx, blurbNodes[j].positiony);
blurbNodes[i].hasChild = true;
blurbNodes[j].hasParent = true;
}
}
}
}
function beginMovingObj(e) {
movingObj = true;
}
function stopMovingObj(e) {
movingObj = false;
movinganotherObj = false;
}
function moveObj(e) {
if(movingObj){
x = e.pageX-150;
y = e.pageY;
}
}
</script>
</body>
</html>
jsfiddle을 사용하면 코드가 무엇인지, 어떻게 작동하는지 알 수 있습니다. 내가 무엇을 고치려고하는지 알 때 항상 도움이됩니다. http://www.jsfiddle.net – Xitcod13
다음은 jsfiddle 링크입니다. http://jsfiddle.net/qWgNj/ – Donnie