Closed xiangfengsu closed 7 years ago
写了一个探照灯效果,可是有些问题,望指教! 在快速移动dragView 的时候,graphics无法严丝合缝 测试demo
var stageWidth = innerWidth; var stageHeight = innerHeight; var stage = new Hilo.Stage({ container:document.body, width:stageWidth, height:stageHeight, renderType:'canvas' }); stage.enableDOMEvent([Hilo.event.POINTER_START, Hilo.event.POINTER_MOVE, Hilo.event.POINTER_END]); var ticker = new Hilo.Ticker(60); ticker.addTick(stage); ticker.start(); var img = 'http://bxu2713410132.my3w.com/bg.jpg'; var bg = new Hilo.Bitmap({ x: 0, y: 0, image: img, width: stageWidth, height: stageHeight, }); var maskBg = new Hilo.View({ x: 0, y: 0, width: stageWidth, height: stageHeight, background: '#000', alpha: .75, }); var graphics = new Hilo.Graphics({ x: 10+25, y: 10+25, }); graphics.beginFill("#000").drawCircle(0, 0, 100 >> 1).endFill(); var bg1 = new Hilo.Bitmap({ x: 0, y: 0, width: stageWidth, height: stageHeight, image: img, mask: graphics }); var dragView = new Hilo.Bitmap({ x:10, y:10, width:150, height:150, image:'http://bxu2713410132.my3w.com/drag.png' }); Hilo.util.copy(dragView, Hilo.drag); dragView.startDrag([0, 0, stageWidth, stageHeight]); dragView.on("dragStart", function(e) {
graphics.x = e.target.x + 25; graphics.y = e.target.y + 25;
}); dragView.on("dragMove", function(e) { graphics.x = e.target.x + 25; graphics.y = e.target.y + 25; }); dragView.on("dragEnd", function(e) { graphics.x = e.target.x + 25; graphics.y = e.target.y + 25; }); setTimeout(function(){ dragView.stopDrag(); },5000); stage.addChild(bg,maskBg,bg1,dragView);
这个是因为先发了dragMove事件后再改变位置导致的,已修复。
写了一个探照灯效果,可是有些问题,望指教! 在快速移动dragView 的时候,graphics无法严丝合缝 测试demo
var stageWidth = innerWidth; var stageHeight = innerHeight; var stage = new Hilo.Stage({ container:document.body, width:stageWidth, height:stageHeight, renderType:'canvas' }); stage.enableDOMEvent([Hilo.event.POINTER_START, Hilo.event.POINTER_MOVE, Hilo.event.POINTER_END]); var ticker = new Hilo.Ticker(60); ticker.addTick(stage); ticker.start(); var img = 'http://bxu2713410132.my3w.com/bg.jpg'; var bg = new Hilo.Bitmap({ x: 0, y: 0, image: img, width: stageWidth, height: stageHeight, }); var maskBg = new Hilo.View({ x: 0, y: 0, width: stageWidth, height: stageHeight, background: '#000', alpha: .75, }); var graphics = new Hilo.Graphics({ x: 10+25, y: 10+25, }); graphics.beginFill("#000").drawCircle(0, 0, 100 >> 1).endFill(); var bg1 = new Hilo.Bitmap({ x: 0, y: 0, width: stageWidth, height: stageHeight, image: img, mask: graphics }); var dragView = new Hilo.Bitmap({ x:10, y:10, width:150, height:150, image:'http://bxu2713410132.my3w.com/drag.png' }); Hilo.util.copy(dragView, Hilo.drag); dragView.startDrag([0, 0, stageWidth, stageHeight]); dragView.on("dragStart", function(e) {
}); dragView.on("dragMove", function(e) { graphics.x = e.target.x + 25; graphics.y = e.target.y + 25; }); dragView.on("dragEnd", function(e) { graphics.x = e.target.x + 25; graphics.y = e.target.y + 25; }); setTimeout(function(){ dragView.stopDrag(); },5000); stage.addChild(bg,maskBg,bg1,dragView);