lufy's legend
标题:
点击图片后,鼠标在红点内可以旋转图片,在红点外无法...
[打印本页]
作者:
lataing
时间:
2014-8-15 23:35
标题:
点击图片后,鼠标在红点内可以旋转图片,在红点外无法...
点击图片后,鼠标在红点内可以旋转图片,在红点外无法旋转,求解。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://lufylegend.com/js/lufylegend-1.9.0.min.js"></script>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-xs-6"><div id="mylegend">loading...</div></div>
<div class="col-xs-6"><div id="show"></div></div>
</div>
<script type="text/javascript">
var loader;
var mouseObj;
var mouseX, mouseY;
init(50, "mylegend", 500, 500, main);
function main() {
stageLayer = new LSprite();
stageLayer.graphics.drawRect(1, "#000000", [0, 0, LGlobal.width, LGlobal.height], true, "#000000");
addChild(stageLayer);
loader = new LLoader();
loader.addEventListener(LEvent.COMPLETE, function (event) {
var temp = new LSprite();
temp.x = 100;
temp.y = 100;
stageLayer.addChild(temp);
var bitmapdata1 = new LBitmapData(loader.content);
var bitmap1 = new LBitmap(bitmapdata1);
temp.addChild(bitmap1);
//图片
var bitmapdata = new LBitmapData(loader.content);
var bitmap = new LBitmap(bitmapdata);
bitmap.x = -bitmap.getWidth() * 0.5;
bitmap.y = -bitmap.getHeight() * 0.5;
//图片层
var backLayer = new LSprite();
backLayer.x = 100+bitmap.width/2;
backLayer.y = 100+bitmap.height/2;
//backLayer.rotate = 50;
backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, function (event) {
//矩形框
rect = new LSprite();
rect.x = -bitmap.getWidth() * 0.5 - 1;
rect.y = -bitmap.getHeight() * 0.5 - 1;
rect.graphics.drawRect(1, "#5bc0de", [0, 0, bitmap.width + 2, bitmap.height + 2], false, "#5bc0de");
backLayer.addChild(rect);
//红色圆点
arc = new LSprite();
arc.x = -bitmap.getWidth() * 0.5 + 240;
arc.y = -bitmap.getHeight() * 0.5 + 0;
arc.graphics.drawArc(1, "#ff0000", [0, 0, 10, 0, 2 * Math.PI], true, "#ff0000");
arc.addEventListener(LMouseEvent.MOUSE_DOWN, function (event) {
mouseX = event.offsetX - backLayer.x + bitmap.width / 2;
mouseY = event.offsetY - backLayer.y + bitmap.height / 2;
mouseObj = event;
mouseObj.mouseX = mouseX;
mouseObj.mouseY = mouseY;
$('#show').append('<span>x:' + mouseX + ' y:' + mouseY + '</span>
')
});
arc.addEventListener(LMouseEvent.MOUSE_UP, function (event) {
mouseX = event.offsetX - backLayer.x + bitmap.width / 2;
mouseY = event.offsetY - backLayer.y + bitmap.height / 2;
$('#show').append('<span>x:' + mouseX + ' y:' + mouseY + '</span>
')
});
arc.addEventListener(LMouseEvent.MOUSE_MOVE, function (event) {
mouseX = event.offsetX - backLayer.x + bitmap.width / 2;
mouseY = event.offsetY - backLayer.y + bitmap.height / 2;
if (mouseObj) {
var ab = Math.sqrt((Math.pow(mouseX - backLayer.x, 2) + Math.pow(mouseY - backLayer.y, 2)));
var c = Math.sqrt((Math.pow(mouseX - mouseObj.mouseX, 2) + Math.pow(mouseY - mouseObj.mouseY, 2)));
var i = (Math.pow(ab, 2) * 2 - Math.pow(c, 2)) / (4 * ab);
if (i < 0)
i = (-i);
i = i * 0.001;
var j = Math.acos((Math.pow(ab, 2) * 2 - Math.pow(c, 2)) / (4 * ab))
backLayer.rotate += Math.acos(i);
$('#show').append('<span>x:' + mouseX + ' y:' + mouseY + ' ab:' + ab + ' c:' + c + ' i:' + i + ' j:' + j + '</span>
')
}
});
backLayer.addChild(arc);
});
stageLayer.addChild(backLayer);
backLayer.addChild(bitmap);
});
loader.load("face.jpg", "bitmapData");
}
</script>
</body>
</html>
复制代码
作者:
lufy
时间:
2014-8-15 23:48
你既然把MOUSE_MOVE事件加到了红点上,那当然只有在红点上移动鼠标的时候才有效了
作者:
lataing
时间:
2014-8-16 08:43
能详细讲讲吗?backLayer 已经有事件了,加到backLayer上会重复不是?难道在backLayer跟红点图层之间再加上一个图层?
作者:
lufy
时间:
2014-8-16 11:27
lataing 发表于 2014-8-16 08:43
能详细讲讲吗?backLayer 已经有事件了,加到backLayer上会重复不是?难道在backLayer跟红点图层之间再加上 ...
backLayer上哪里有MOUSE_MOVE事件?
欢迎光临 lufy's legend (http://lufylegend.com/forum/)
Powered by Discuz! X2.5