What is the eg.Axes?

You can change the value of the axis and apply it to the UI via the touch screen, mouse, or various other inputs.

zoom: 1.00

JavaScript

<div>
  <p>You can change the value of the axis and apply it to the UI via the touch screen, mouse, or various other inputs.</p>
  <div id="delegateTarget">
    <div id="uiWrapper">
      <div class="ui">
        <img src="../image/axes/logo.svg"/>
      </div>
    </div>
  </div>
</div>

const SUPPORT_TOUCH = "ontouchstart" in window;
const delegateTarget = document.getElementById("delegateTarget");
const uiWrapper = document.getElementById("uiWrapper");
const uiWidth = uiWrapper.getBoundingClientRect().width;
const uiHeight = uiWrapper.getBoundingClientRect().height;
const ui = uiWrapper.querySelector(".ui");

// 1. Initialize eg.Axes
const axes = new eg.Axes({
  panX: {
    range: [0, uiWidth],
    bounce: 20
  },
  panY: {
    range: [0, uiHeight],
    bounce: 20
  },
  zoom: {
    range: [1, 5],
    bounce: 1
  }
}, {
  minimumDuration: 300
});

// 2. attach event handler
axes.on({
  "change": function (e) {
    var pos = e.pos;
    ui.style[eg.Axes.TRANSFORM] =
      `translate3d(${pos.panX}px, ${pos.panY}px, 0) scale(${pos.zoom})`;
  },
});

// 3. Initialize inputTypes and connect it
axes.connect("panX panY", new eg.Axes.PanInput(delegateTarget))
axes.connect("panX panY", new eg.Axes.MoveKeyInput(delegateTarget, {
  scale: [5, -5]
})).connect("zoom", SUPPORT_TOUCH ?
  new eg.Axes.PinchInput(delegateTarget) :
  new eg.Axes.WheelInput(delegateTarget));

// 4. move to position
axes.setTo({panX: uiWidth/2 + 20, panY: uiHeight/2});

React

import React, { useEffect } from "react";

import { useAxes, PanInput, PinchInput, MoveKeyInput, WheelInput } from "@egjs/react-axes";
import Icon from "../../../static/img/demos/axes/logo.svg";
import "../../css/demos/axes.css";

export default function AxesDemo() {
  const { connect, setAxis, setTo, panX, panY, zoom } = useAxes(
    {
      panX: {
        range: [0, 0],
        bounce: 20,
      },
      panY: {
        range: [0, 0],
        bounce: 20,
      },
      zoom: {
        range: [1, 5],
        bounce: 1,
      },
    },
    {
      minimumDuration: 300,
    }
  );

  useEffect(() => {
    const SUPPORT_TOUCH = "ontouchstart" in window;
    const delegateTarget = document.getElementById("delegateTarget");
    const uiWrapper = document.getElementById("uiWrapper");
    const uiWidth = uiWrapper.getBoundingClientRect().width;
    const uiHeight = uiWrapper.getBoundingClientRect().height;

    setAxis({
      panX: {
        range: [0, uiWidth],
      },
      panY: {
        range: [0, uiHeight],
      },
    });
    connect("panX panY", new PanInput(delegateTarget));
    connect("panX panY", new MoveKeyInput(delegateTarget, { scale: [5, -5] }));
    connect("zoom", SUPPORT_TOUCH ? new PinchInput(delegateTarget) : new WheelInput(delegateTarget));

    setTo({ panX: uiWidth / 2, panY: uiHeight / 2 });
  }, []);

  return (
    <div>
      <p>
        You can change the value of the axis and apply it to the UI via the
        touch screen, mouse, or various other inputs.
      </p>
      <div id="delegateTarget">
        <div id="uiWrapper">
          <div className="ui" style={{ transform: `translate3d(${panX}px, ${panY}px, 0) scale(${zoom})` }}>
            <Icon style={{ height: "75px" }} />
          </div>
        </div>
      </div>
      <div style={{ clear: "both" }}></div>
    </div>
  );
};

Vue@2

<template>
  <div class="App">
    <p>
      You can change the value of the axis and apply it to the UI via the
      touch screen, mouse, or various other inputs.
    </p>
    <div id="delegateTarget">
      <div id="uiWrapper">
        <div class="ui" :style="{transform: `translate3d(${panX}px, ${panY}px, 0) scale(${zoom})`}">
          <img :src="`${require('../../../static/img/demos/axes/logo.svg')}`"/>
        </div>
      </div>
    </div>
    <div style="clear: 'both'"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "@vue/composition-api";
import { useAxes, PanInput, PinchInput, MoveKeyInput, WheelInput } from "@egjs/vue2-axes";

export default defineComponent({
  name: "App",
  setup() {
    const { connect, setAxis, setTo, panX, panY, zoom } = useAxes(
      {
        panX: {
          range: [0, 0],
          bounce: 20,
        },
        panY: {
          range: [0, 0],
          bounce: 20,
        },
        zoom: {
          range: [1, 5],
          bounce: 1,
        },
      },
      {
        minimumDuration: 300,
      }
    );

    onMounted(() => {
      const SUPPORT_TOUCH = "ontouchstart" in window;
      const delegateTarget = document.getElementById("delegateTarget");
      const uiWrapper = document.getElementById("uiWrapper");
      const uiWidth = uiWrapper.getBoundingClientRect().width;
      const uiHeight = uiWrapper.getBoundingClientRect().height;

      setAxis({
        panX: {
          range: [0, uiWidth],
        },
        panY: {
          range: [0, uiHeight],
        },
      });
      connect("panX panY", new PanInput(delegateTarget));
      connect("panX panY", new MoveKeyInput(delegateTarget, { scale: [5, -5] }));
      connect("zoom", SUPPORT_TOUCH ? new PinchInput(delegateTarget) : new WheelInput(delegateTarget));

      setTo({ panX: uiWidth / 2, panY: uiHeight / 2 });
    });

    return {
      panX,
      panY,
      zoom,
    };
  },
});
</script>

Vue@3

<template>
  <div class="App">
    <p>
      You can change the value of the axis and apply it to the UI via the
      touch screen, mouse, or various other inputs.
    </p>
    <div id="delegateTarget">
      <div id="uiWrapper">
        <div class="ui" :style="{transform: `translate3d(${panX}px, ${panY}px, 0) scale(${zoom})`}">
          <img :src="`${require('../../../static/img/demos/axes/logo.svg')}`"/>
        </div>
      </div>
    </div>
    <div style="clear: 'both'"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import { useAxes, PanInput, PinchInput, MoveKeyInput, WheelInput } from "@egjs/vue-axes";

export default defineComponent({
  name: "App",
  setup() {
    const { connect, setAxis, setTo, panX, panY, zoom } = useAxes(
      {
        panX: {
          range: [0, 0],
          bounce: 20,
        },
        panY: {
          range: [0, 0],
          bounce: 20,
        },
        zoom: {
          range: [1, 5],
          bounce: 1,
        },
      },
      {
        minimumDuration: 300,
      }
    );

    onMounted(() => {
      const SUPPORT_TOUCH = "ontouchstart" in window;
      const delegateTarget = document.getElementById("delegateTarget");
      const uiWrapper = document.getElementById("uiWrapper");
      const uiWidth = uiWrapper.getBoundingClientRect().width;
      const uiHeight = uiWrapper.getBoundingClientRect().height;

      setAxis({
        panX: {
          range: [0, uiWidth],
        },
        panY: {
          range: [0, uiHeight],
        },
      });
      connect("panX panY", new PanInput(delegateTarget));
      connect("panX panY", new MoveKeyInput(delegateTarget, { scale: [5, -5] }));
      connect("zoom", SUPPORT_TOUCH ? new PinchInput(delegateTarget) : new WheelInput(delegateTarget));

      setTo({ panX: uiWidth / 2, panY: uiHeight / 2 });
    });

    return {
      panX,
      panY,
      zoom,
    };
  },
});
</script>

Svelte

<script>
  import { onMount } from "svelte";
  import { useAxes, PanInput, PinchInput, MoveKeyInput, WheelInput } from "@egjs/svelte-axes";

  const { connect, setAxis, setTo, panX, panY, zoom } = useAxes(
    {
      panX: {
        range: [0, 0],
        bounce: 20,
      },
      panY: {
        range: [0, 0],
        bounce: 20,
      },
      zoom: {
        range: [1, 5],
        bounce: 1,
      },
    },
    {
      minimumDuration: 300,
    }
  );

  onMount(() => {
    const SUPPORT_TOUCH = "ontouchstart" in window;
    const delegateTarget = document.getElementById("delegateTarget");
    const uiWrapper = document.getElementById("uiWrapper");
    const uiWidth = uiWrapper.getBoundingClientRect().width;
    const uiHeight = uiWrapper.getBoundingClientRect().height;

    setAxis({
      panX: {
        range: [0, uiWidth],
      },
      panY: {
        range: [0, uiHeight],
      },
    });
    connect("panX panY", new PanInput(delegateTarget));
    connect("panX panY", new MoveKeyInput(delegateTarget, { scale: [5, -5] }));
    connect("zoom", SUPPORT_TOUCH ? new PinchInput(delegateTarget) : new WheelInput(delegateTarget));

    setTo({ panX: uiWidth / 2, panY: uiHeight / 2 });
  });
</script>

<div>
  <p>
    You can change the value of the axis and apply it to the UI via the
    touch screen, mouse, or various other inputs.
  </p>
  <div id="delegateTarget">
    <div id="uiWrapper">
      <div class="ui" style="transform: `translate3d(${panX}px, ${panY}px, 0) scale(${zoom})`">
        <img src="../image/axes/logo.svg"/>
      </div>
    </div>
  </div>
  <div style="clear: 'both'"></div>
</div>