设为首页收藏本站
开启辅助访问 切换到窄版

lufy's legend

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
lufy's legend»论坛 › lufylegend.js引擎 › 使用疑问 › 点击图片后，鼠标在红点内可以旋转图片，在红点外无法.. ...
返回列表 发新帖
查看: 6022|回复: 3
打印 上一主题 下一主题

点击图片后，鼠标在红点内可以旋转图片，在红点外无法...

[复制链接]
lataing

2

主题

0

好友

22

积分

士兵

Rank: 1
跳转到指定楼层
楼主
发表于 2014-8-15 23:35:52 |只看该作者 |倒序浏览
点击图片后，鼠标在红点内可以旋转图片，在红点外无法旋转，求解。。。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <script type="text/javascript" src="http://lufylegend.com/js/lufylegend-1.9.0.min.js"></script>
  6.     <!-- 新 Bootstrap 核心 CSS 文件 -->
  7.     <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">

  9.     <!-- 可选的Bootstrap主题文件（一般不用引入） -->
  10.     <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

  12.     <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  13.     <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

  15.     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  16.     <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  17. </head>
  18. <body>
  19.     <div class="row">
  20.         <div class="col-xs-6"><div id="mylegend">loading...</div></div>
  21.         <div class="col-xs-6"><div id="show"></div></div>

  23.     </div>
  24.     <script type="text/javascript">
  25.         var loader;
  26.         var mouseObj;
  27.         var mouseX, mouseY;
  28.         init(50, "mylegend", 500, 500, main);

  30.         function main() {
  31.             stageLayer = new LSprite();
  32.             stageLayer.graphics.drawRect(1, "#000000", [0, 0, LGlobal.width, LGlobal.height], true, "#000000");
  33.             addChild(stageLayer);

  35.             loader = new LLoader();
  36.             loader.addEventListener(LEvent.COMPLETE, function (event) {

  38.                 var temp = new LSprite();
  39.                 temp.x = 100;
  40.                 temp.y = 100;
  41.                 stageLayer.addChild(temp);
  42.                 var bitmapdata1 = new LBitmapData(loader.content);
  43.                 var bitmap1 = new LBitmap(bitmapdata1);
  44.                 temp.addChild(bitmap1);


  47.                 //图片
  48.                 var bitmapdata = new LBitmapData(loader.content);
  49.                 var bitmap = new LBitmap(bitmapdata);
  50.                 bitmap.x = -bitmap.getWidth() * 0.5;
  51.                 bitmap.y = -bitmap.getHeight() * 0.5;

  53.                 //图片层
  54.                 var backLayer = new LSprite();
  55.                 backLayer.x = 100+bitmap.width/2;
  56.                 backLayer.y = 100+bitmap.height/2;
  57.                 //backLayer.rotate = 50;
  58.                 backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, function (event) {
  59.                     //矩形框
  60.                     rect = new LSprite();
  61.                     rect.x = -bitmap.getWidth() * 0.5 - 1;
  62.                     rect.y = -bitmap.getHeight() * 0.5 - 1;
  63.                     rect.graphics.drawRect(1, "#5bc0de", [0, 0, bitmap.width + 2, bitmap.height + 2], false, "#5bc0de");
  64.                     backLayer.addChild(rect);

  66.                     //红色圆点
  67.                     arc = new LSprite();
  68.                     arc.x = -bitmap.getWidth() * 0.5 + 240;
  69.                     arc.y = -bitmap.getHeight() * 0.5 + 0;
  70.                     arc.graphics.drawArc(1, "#ff0000", [0, 0, 10, 0, 2 * Math.PI], true, "#ff0000");
  71.                     arc.addEventListener(LMouseEvent.MOUSE_DOWN, function (event) {
  72.                         mouseX = event.offsetX - backLayer.x + bitmap.width / 2;
  73.                         mouseY = event.offsetY - backLayer.y + bitmap.height / 2;

  75.                         mouseObj = event;
  76.                         mouseObj.mouseX = mouseX;
  77.                         mouseObj.mouseY = mouseY;

  79.                         $('#show').append('<span>x:' + mouseX + '  y:' + mouseY + '</span>
  80. ')
  81.                     });
  82.                     arc.addEventListener(LMouseEvent.MOUSE_UP, function (event) {
  83.                         mouseX = event.offsetX - backLayer.x + bitmap.width / 2;
  84.                         mouseY = event.offsetY - backLayer.y + bitmap.height / 2;

  86.                         $('#show').append('<span>x:' + mouseX + '  y:' + mouseY + '</span>
  87. ')
  88.                     });
  89.                     arc.addEventListener(LMouseEvent.MOUSE_MOVE, function (event) {
  90.                         mouseX = event.offsetX - backLayer.x + bitmap.width / 2;
  91.                         mouseY = event.offsetY - backLayer.y + bitmap.height / 2;

  93.                         if (mouseObj) {
  94.                             var ab = Math.sqrt((Math.pow(mouseX - backLayer.x, 2) + Math.pow(mouseY - backLayer.y, 2)));
  95.                             var c = Math.sqrt((Math.pow(mouseX - mouseObj.mouseX, 2) + Math.pow(mouseY - mouseObj.mouseY, 2)));
  96.                             var i = (Math.pow(ab, 2) * 2 - Math.pow(c, 2)) / (4 * ab);

  98.                             if (i < 0)
  99.                                 i = (-i);
  100.                             i = i * 0.001;


  103.                             var j = Math.acos((Math.pow(ab, 2) * 2 - Math.pow(c, 2)) / (4 * ab))



  107.                             backLayer.rotate += Math.acos(i);

  109.                             $('#show').append('<span>x:' + mouseX + '  y:' + mouseY + '   ab:' + ab + '   c:' + c + '   i:' + i + '   j:' + j + '</span>
  110. ')
  111.                         }

  113.                         
  114.                     });
  115.                     backLayer.addChild(arc);
  116.                 });
  117.                 stageLayer.addChild(backLayer);

  119.                 backLayer.addChild(bitmap);

  121.             });
  122.             loader.load("face.jpg", "bitmapData");
  123.         }
  124.     </script>

  126. </body>
  127. </html>
复制代码
回复

使用道具 举报

lufy

37

主题

8

好友

9312

积分

诸侯王

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15
沙发
发表于 2014-8-15 23:48:56 |只看该作者
你既然把MOUSE_MOVE事件加到了红点上，那当然只有在红点上移动鼠标的时候才有效了
不回答与技术和引擎不相关的问题
回复

使用道具 举报

lataing

2

主题

0

好友

22

积分

士兵

Rank: 1
板凳
发表于 2014-8-16 08:43:19 |只看该作者
能详细讲讲吗？backLayer 已经有事件了，加到backLayer上会重复不是？难道在backLayer跟红点图层之间再加上一个图层？
回复

使用道具 举报

lufy

37

主题

8

好友

9312

积分

诸侯王

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15
地板
发表于 2014-8-16 11:27:56 |只看该作者
lataing 发表于 2014-8-16 08:43
能详细讲讲吗？backLayer 已经有事件了，加到backLayer上会重复不是？难道在backLayer跟红点图层之间再加上 ...

backLayer上哪里有MOUSE_MOVE事件？
不回答与技术和引擎不相关的问题
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

防止垃圾广告，请填写任意字符

Archiver|lufy's legend

GMT+8, 2024-5-1 07:52 , Processed in 0.048982 second(s), 20 queries .

Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部