Merge pull request #45 from journey-ad/master

增加对点击事件的处理

dist/dev.html

@@ -12,6 +12,6 @@
 </canvas>
 </div>
 <script type="text/javascript" src="device.min.js"></script>
-<script type="text/javascript" src="bundle.js?64fe0900cd19ddfbda5b"></script></body>
+<script type="text/javascript" src="bundle.js?0f7f527630fd90639e82"></script></body>
 </html>
 <!-- loadlive2d("live2dcanvas", "../assets/name/name.model.json", 0.5); -->

index.js

@@ -48,32 +48,32 @@ hexo.extend.helper.register('live2d', function() {
     <style>
       #${config.id}{
       	-webkit-touch-callout: none;
-		-webkit-user-select: none;
-		-khtml-user-select: none;
-		-moz-user-select: none;
-		-ms-user-select: none;
-		user-select: none;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        ms-user-select: none;
+        user-select: none;
         position: fixed;
         width: ${config.width}px;
         height: ${config.height}px;
         opacity:${config.opacityDefault};
         ${config.opacityDefault != config.opacityHover ? `transition:opacity 0.95s ease-out;
-		-moz-transition:opacity 0.95s ease-out; /* Firefox 4 */
-		-webkit-transition:opacity 0.95s ease-out; /* Safari and Chrome */
-		-o-transition:opacity 0.95s ease-out; /* Opera */`: ``}
+        moz-transition:opacity 0.95s ease-out; /* Firefox 4 */
+        -webkit-transition:opacity 0.95s ease-out; /* Safari and Chrome */
+        -o-transition:opacity 0.95s ease-out; /* Opera */`: ``}
         ${config.position}: ${config.horizontalOffset}px;
         z-index: 999;
         pointer-events: none;
         bottom: ${config.verticalOffset}px;
       }
-	  ${config.opacityDefault != config.opacityHover ? `#${config.id}:hover{
-		opacity:${config.opacityHover};
+    ${config.opacityDefault != config.opacityHover ? `#${config.id}:hover{
+    opacity:${config.opacityHover};
       }`: ``}
     </style>
     <script src="/live2d/device.min.js"></script>
     <script type="text/javascript">
     (function(){
-	  if(typeof(device) != "undefined"){
+        if(typeof(device) != "undefined"){
         if(device.mobile()){
           ${config.mobileShow ? `document.getElementById("${config.id}").style.width = '${config.width * config.mobileScaling}px';
           document.getElementById("${config.id}").style.height = '${config.height * config.mobileScaling}px';
@@ -83,10 +83,10 @@ hexo.extend.helper.register('live2d', function() {
           document.write('<script type="text/javascript" src="/live2d/script.js"><\\/script>');
           document.write('<script>loadlive2d(${JSON.stringify(config.id)}, ${JSON.stringify(url.resolve("/live2d/assets/", config.model + ".model.json"))}, 0.5)<\\/script>');
         }
-	  }else{
+       }else{
         document.write('<script type="text/javascript" src="/live2d/script.js"><\\/script>');
         document.write('<script>loadlive2d(${JSON.stringify(config.id)}, ${JSON.stringify(url.resolve("/live2d/assets/", config.model + ".model.json"))}, 0.5)<\\/script>');    
-	  }
+    }
     })();
     </script>
 `
@@ -118,4 +118,3 @@ fs.exists(path.resolve(__dirname, './dist/device.min.js'), function(exists){
 hexo.extend.generator.register('live2d', function (locals) {
   return generators;
 });
-

src/main.js

@@ -300,13 +300,38 @@ function modelTurnHead(event)
     let vy = transformViewY(target.y - rect.top);
 
     if (LAppDefine.DEBUG_MOUSE_LOG)
-        console.log("onMouseDown device( x:" + event.clientX + " y:" + event.clientY + " ) view( x:" + vx + " y:" + vy + ")");
+        console.log("onMouseMove device( x:" + event.clientX + " y:" + event.clientY + " ) view( x:" + vx + " y:" + vy + ")");
 
     lastMouseX = sx;
     lastMouseY = sy;
 
-    dragMgr.setPoint(vx, vy); 
+    dragMgr.setPoint(vx, vy);
+}
+
+function modelTapEvent(event)
+{
+    drag = true;
+
+    let rect = canvas.getBoundingClientRect();
 
+    let sx = transformScreenX(event.clientX - rect.left);
+    let sy = transformScreenY(event.clientY - rect.top);
+    let target = transformRect({
+        x: rect.left + rect.width / 2,
+        y: rect.top + rect.height * head_pos
+    }, {
+        x: event.clientX,
+        y: event.clientY
+    }, rect)
+    let vx = transformViewX(target.x - rect.left);
+    let vy = transformViewY(target.y - rect.top);
+
+    if (LAppDefine.DEBUG_MOUSE_LOG)
+        console.log("onMouseDown device( x:" + event.clientX + " y:" + event.clientY + " ) view( x:" + vx + " y:" + vy + ")");
+
+    lastMouseX = sx;
+    lastMouseY = sy;
+
     live2DMgr.tapEvent(vx, vy);
 }
 
@@ -358,8 +383,7 @@ function mouseEvent(e)
         // if (e.wheelDelta > 0) modelScaling(1.1); 
         // else modelScaling(0.9); 
     } else if (e.type == "mousedown") {
-        if("button" in e && e.button != 0) return;
-        // modelTurnHead(e);
+        modelTapEvent(e);
     } else if (e.type == "mousemove") {
         modelTurnHead(e);
     } else if (e.type == "mouseup") {
@@ -374,7 +398,7 @@ function touchEvent(e)
 {
     var touch = e.touches[0];
     if (e.type == "touchstart") {
-        if (e.touches.length == 1) modelTurnHead(touch);
+        if (e.touches.length == 1) modelTapEvent(touch);
         // onClick(touch);
     } else if (e.type == "touchmove") {
         followPointer(touch);