Sie sind nicht angemeldet.

Drag with middle mouse button

djodi

Anfänger

  • »djodi« ist der Autor dieses Themas

Beiträge: 17

  • Nachricht senden

1

Mittwoch, 7. Juli 2021, 21:38

Drag with middle mouse button

Hi there!
I´m working on a plugin that will need a middle mouse button pan on flat panoramas. In this interactive sandobox (fork to edit) you can play the code in real time.
I need help with the pan function. I know how to drag layers, hotspots, etc, but still didn't realize how to implement the drag to change the vlookat and hlookat values.
The code in the sandbox is as follows:

XML

 
1
2
3
4
5

<krpano onstart="set(debugmode, get(editmode));" >
    <plugin name='mousecontrol' url='mouse.js' />
    <view hlookat="0.0" vlookat="0.0" fovtype="VFOV" fov="0.5625" fovmax="0.5625" maxpixelzoom="1.0" limitview="fullrange" />
    <image hfov="1.00" vfov="0.562500" voffset="0.00">      <flat url="01.jpg"/>  </image>
</krpano>

Javascript-Quelltext

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

var krpanoplugin = function () {
  var local = this;
  var krpano = null;
  var plugin = null;
  var device = null;
  var browserevents = null;
  local.registerplugin = function (krpanointerface, pluginpath, pluginobject) {
    krpano = krpanointerface;
    plugin = pluginobject;
    device = krpano.device;
    browserevents = device.browser.events;
    /* MOUSE EVENTS ******/  
  // krpano.control.usercontrol = "off";
    if (browserevents.mouse) {
      krpano.control.layer.addEventListener("mousedown", onMouseDown);
    }  };
  local.unloadplugin = function () {
    plugin = null;
    krpano = null;
  };
  /* **** FUNCTIONS ******/
  function onMouseDown(ev) {
    if (ev.buttons === 4) {
      console.log("middle mouse button DOWN");
      if (browserevents.mouse) {
        window.addEventListener("mousemove", pan);
        window.addEventListener("mouseup", onMouseUp);
      }
  }  
} 
 function pan(ev) {
    console.log(`x: ${ev.x}, y: ${ev.y}`);
  }
  function onMouseUp(ev) {
    console.log("middle mouse button UP");
    if (browserevents.mouse) {
      window.removeEventListener("mousemove", pan);
      window.removeEventListener("mouseup", onMouseUp);
   }
  }
};

Any help?

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »djodi« (8. Juli 2021, 13:28)

djodi

Anfänger

  • »djodi« ist der Autor dieses Themas

Beiträge: 17

  • Nachricht senden

2

Donnerstag, 8. Juli 2021, 15:58

This is what I came up with so far, not happy with it.
Dividing the movement by 1000 was totally arbitrary and works differently at different zoom levels.

Javascript-Quelltext

 
1
2
3
4

function pan(ev) {
	krpano.call(`calc(view.hlookat, view.hlookat - ${ev.movementX / 1000});`);
	krpano.call(`calc(view.vlookat, view.vlookat - ${ev.movementY / 1000});`);
 }

Ähnliche Themen