9
Basit bir html tabanlı çizim uygulaması (bağımsız basitleştirilmiş kod ekli körük) yazmaya çalışıyorum.Android'de yavaş Javascript dokunma olayları
- iPad 1 ve 2: Windows'u çalıştıran harika
- ASUS T101 çalışır: Aşağıdaki cihazlarda bu test ettik Works harika
- Samsung Galaxy Tab: Son derece yavaş ve düzensiz - kullanılamaz.
- Lenovo IdeaPad K1: Son derece yavaş ve düzensiz - kullanışsız.
- Asus Transformer Prime: iPad ile karşılaştırılabilir gecikme - kullanılabilecek kadar yakın.
Asus tablet, ICS'yi çalıştırıyor, diğer android tabletler, 3.1 ve 3.2'yi çalıştırıyor. Stok Android tarayıcısını kullanarak test ettim. Ayrıca Android Chrome Beta sürümünü denedim, ancak bu daha da kötüydü. Android tabletler çok yavaş neden http://www.youtube.com/watch?v=Wlh94FBNVEQ
Sorularım ise:
Burada sorunun gösterir bir video? Yanlış bir şey mi yapıyorum ya da Android işletim sistemi veya tarayıcı ile bir miras sorunu mu yoksa kodumda yapabileceğim bir şey var mı?
multi.html:
<html>
<body>
<style media="screen">
canvas { border: 1px solid #CCC; }
</style>
<canvas style="" id="draw" height="450" width="922"></canvas>
<script class="jsbin" src="jquery.js"></script>
<script src="multi.js"></script>
</body>
</html>
multi.js:
var CanvasDrawr = function(options) {
// grab canvas element
var canvas = document.getElementById(options.id),
ctxt = canvas.getContext("2d");
canvas.style.width = '100%'
canvas.width = canvas.offsetWidth;
canvas.style.width = '';
// set props from options, but the defaults are for the cool kids
ctxt.lineWidth = options.size || Math.ceil(Math.random() * 35);
ctxt.lineCap = options.lineCap || "round";
ctxt.pX = undefined;
ctxt.pY = undefined;
var lines = [,,];
var offset = $(canvas).offset();
var eventCount = 0;
var self = {
// Bind click events
init: function() {
// Set pX and pY from first click
canvas.addEventListener('touchstart', self.preDraw, false);
canvas.addEventListener('touchmove', self.draw, false);
},
preDraw: function(event) {
$.each(event.touches, function(i, touch) {
var id = touch.identifier;
lines[id] = { x : this.pageX - offset.left,
y : this.pageY - offset.top,
color : 'black'
};
});
event.preventDefault();
},
draw: function(event) {
var e = event, hmm = {};
eventCount += 1;
$.each(event.touches, function(i, touch) {
var id = touch.identifier,
moveX = this.pageX - offset.left - lines[id].x,
moveY = this.pageY - offset.top - lines[id].y;
var ret = self.move(id, moveX, moveY);
lines[id].x = ret.x;
lines[id].y = ret.y;
});
event.preventDefault();
},
move: function(i, changeX, changeY) {
ctxt.strokeStyle = lines[i].color;
ctxt.beginPath();
ctxt.moveTo(lines[i].x, lines[i].y);
ctxt.lineTo(lines[i].x + changeX, lines[i].y + changeY);
ctxt.stroke();
ctxt.closePath();
return { x: lines[i].x + changeX, y: lines[i].y + changeY };
},
};
return self.init();
};
$(function(){
var drawr = new CanvasDrawr({ id: "draw", size: 5 });
});