2
У меня есть приложение, разработанное с помощью phonegap, и я тестирую поддержку касания для fabricJS, но почему-то это не работает для меня.Как получить fabricJS для работы с событиями касания?
Я пробовал создать пользовательскую версию here, но это не сработает.
У меня есть this jsfiddle, где я использовал другую версию под названием fabric_events.js, но она тоже не работает. (Кстати, как вы загружаете свою версию на jsfiddle?)
поэтому я попробовал FabricJS touch events demo, и он работает!
С тех пор как демо работало, я попытался загрузить свою собственную версию с http://fabricjs.com/lib/fabric_with_gestures.js, но все равно не повезло.
это мой код:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, width=device-width, user-scalable=true" />
<script src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/fabric_with_gestures.js"></script>
<script type="text/javascript" >
$(document).ready
(
function() {
var canvas = new fabric.Canvas('c');
// Do some initializing stuff
fabric.Object.prototype.set({
transparentCorners: false,
cornerColor: 'rgba(102,153,255,0.5)',
cornerSize: 12,
padding: 5
});
alert('fabric.isTouchSupported=' + fabric.isTouchSupported);
var info = document.getElementById('info');
canvas.on({
'touch:gesture': function() {
var text = document.createTextNode(' Gesture ');
info.insertBefore(text, info.firstChild);
},
'touch:drag': function() {
var text = document.createTextNode(' Dragging ');
info.insertBefore(text, info.firstChild);
},
'touch:orientation': function() {
var text = document.createTextNode(' Orientation ');
info.insertBefore(text, info.firstChild);
},
'touch:shake': function() {
var text = document.createTextNode(' Shaking ');
info.insertBefore(text, info.firstChild);
},
'touch:longpress': function() {
var text = document.createTextNode(' Longpress ');
info.insertBefore(text, info.firstChild);
}
});
fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function (img) {
img.scale(0.5).set({
left: 150,
top: 150,
angle: -15
});
canvas.add(img);
});
canvas.add(new fabric.Rect({
left: 50,
top: 50,
fill: '#269926',
width: 100,
height: 100,
originX: 'left',
originY: 'top',
hasControls: true,
hasBorders: true,
selectable: true
}));
var obj = new fabric.Rect({
left: 20,
top: 20,
fill: '#555555',
width: 100,
height: 100,
originX: 'left',
originY: 'top',
hasControls: true,
hasBorders: true,
selectable: true
});
canvas.add(obj).renderAll();
canvas.setActiveObject(obj)
//canvas.sendToBack(obj)
}
);
</script>
<title></title>
<style>
canvas {
border: 1px solid #999;
}
</style>
</head>
<body>
<canvas id="c" width="200" height="200" style='z-index:-1'></canvas>
<p id='info' style='background: #eef; width: 583px; padding: 10px; overflow: scroll; height: 80px'></p>
</body>
</html>