我用phonegap开发了一个应用程序，我正在测试fabricJS的触摸支持，但不知何故，它对我不起作用。
我尝试创建一个自定义版本here，但它不工作。
我有一个this jsfiddle，我用了另一个版本fabric_events.js，但它似乎也不起作用。（顺便问一下，你如何将自己的版本上传到jsfiddle？）
所以我试了一下FabricJS X1 E2 F1 X，它确实能用！！
由于演示工作，我试图从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>
1条答案
按热度按时间b4lqfgs41#
很抱歉，我的回答太晚了。我现在正在使用Fabric.js，我没有任何手势方面的问题。我试过你的代码，如果你关心三件事，它通常是工作的：
1.)非常重要的一点：请从画布本身移除
style='z-index:-1'。z-index属性指定元素的堆栈顺序，负数将不允许您与范例中的画布互动。更多信息：CSS z-index Property。2.)您确定已使用“交互”和“手势”创建自定义生成吗？“手势”依赖于“交互”。如果您不确定，请使用除“节点”之外的所有模块创建自定义生成（除非您以后要使用Node.js）。
3.)Fabric.js和jQuery必须在子文件夹'js'关于你的代码。但我会认为它已经像。
那对你也应该有用。