- 注册时间
- 2014-7-30
- 最后登录
- 2014-8-18
- 阅读权限
- 20
- 积分
- 22
- 精华
- 0
- 帖子
- 4
|
点击图片后,鼠标在红点内可以旋转图片,在红点外无法旋转,求解。。。- <!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>
复制代码 |
|