所以我最近将Kinetic.JS v4.6.0 添加到我的应用程序中,并测试了一个简单的矩形拖放。
在网络浏览器上正常工作,但是一旦我在移动设备上使用它,它就会在拖动后出错并留下矩形的鬼影。
我基本上使用与demo相同的脚本,没有touchStart / touchEnd事件,我也使用JQuery 1.9.1和JQueryMobile-1.3.2。
我怎样才能摆脱这种效果,我已经尝试清除touchStart上的图层并在触摸结束时再次绘制舞台,但幽灵仍留在那里。
修改 我的设备是运行4.2.2的Galaxy S2并且发生重影,但是应用程序在Ipad上工作正常。
/index.JS
$( window ).on( "pageinit", function ( event ) {
stage = new Kinetic.Stage( {
container: "container",
width: 500,
height: 500
} );
MapLayer = new Kinetic.Layer()
var Rect = new Kinetic.Rect( {
x: 0,
y: 0,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
draggable: true
} );
MapLayer.add( Rect );
stage.add( MapLayer );
的index.html
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script src="js/kinetic-v4.6.0.min.js"></script>
<script src="js/index.js"></script>
<title>Mobile OneStop</title>
<div data-role="page">
<div data-role="content">
<div id="container">
</div>
</div>
</div>
(如果人们不理解,我可能会做一个绘制得很糟糕的油漆图片来表明这一点)
修改 http://imgur.com/a/HlNxj#0 - 自从发布此代码以来,我已经更改了很多代码,但问题仍然存在。
答案 0 :(得分:1)
管理以阻止重影发生,我刚刚在我需要绘制的物体后面放了一个巨大的白色矩形,不是很优雅,但它完成了工作。