setup the frame

homeday-de · Feb 26, 2019 · ea7bc85 · ea7bc85
1 parent fb7b235
commit ea7bc85
Show file tree

Hide file tree

Showing 11 changed files with 150 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,8 @@
+.DS_Store
+
+.cache/
+dist/
+node_modules/
+
+yarn.lock
+package-lock.json
diff --git a/demo/01.basic/app.vue b/demo/01.basic/app.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="app">
+    <!-- <div>App</div> -->
+    <vue-zoomer class="zoomer">
+      <img src="../assets/landscape-1.jpg" class="image">
+    </vue-zoomer>
+  </div>
+</template>
+
+<style lang="stylus">
+body
+  margin 0
+</style>
+
+<style lang="stylus" scoped>
+.app
+  width 100vw
+  height 100vh
+
+.zoomer
+  width 100%
+  height: 100%
+
+.image
+  width 100%
+  height 100%
+  object-fit contain
+</style>
diff --git a/demo/01.basic/index.html b/demo/01.basic/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>01.Basic - Vue Zoomer Demo</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script src="./main.js"></script>
+</body>
+</html>
diff --git a/demo/01.basic/main.js b/demo/01.basic/main.js
@@ -0,0 +1,12 @@
+import Vue from 'vue'
+
+import VueZoomer from '../../src/vue-zoomer.vue'
+import App from './app.vue'
+
+Vue.component('VueZoomer', VueZoomer)
+Vue.component('App', App)
+
+new Vue({
+  el: '#app',
+  render: h => h('App'),
+})
diff --git a/demo/assets/landscape-1.jpg b/demo/assets/landscape-1.jpg
diff --git a/demo/assets/landscape-2.jpg b/demo/assets/landscape-2.jpg
diff --git a/demo/assets/landscape-3.jpg b/demo/assets/landscape-3.jpg
diff --git a/demo/assets/landscape-4.jpg b/demo/assets/landscape-4.jpg
diff --git a/demo/assets/landscape-5.jpg b/demo/assets/landscape-5.jpg
diff --git a/package.json b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "vue-zoomer",
+  "version": "0.1.0",
+  "main": "index.js",
+  "scripts": {
+    "dev": "parcel demo/01.basic/index.html --port 5100"
+  },
+  "repository": "git@github.com:jarvisniu/vue-zoomer.git",
+  "author": "Jarvis Niu <jarvisniu@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "app.vue": "^0.1.10",
+    "parcel-bundler": "^1.11.0",
+    "stylus": "^0.54.5",
+    "vue": "^2.6.7",
+    "vue-hot-reload-api": "^2.3.3"
+  },
+  "devDependencies": {
+    "@vue/component-compiler-utils": "^2.6.0",
+    "vue-template-compiler": "^2.6.7"
+  }
+}
diff --git a/src/vue-zoomer.vue b/src/vue-zoomer.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="vue-zoomer">
+    <div class="zoomer" :style="wrapperStyle">
+    <!-- <div>Vue Zoomer</div> -->
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      // 容器宽高，用来决定缩放器的宽高。需要响应缩放和旋转。
+      containerWidth: 1,
+      containerHeight: 1,
+      // 中心值：交互最终变更这些值，旋转缩放后该值维持不变；
+      translateX: 0,
+      translateY: 0,
+      scale: 0.5, // 相对容器的
+    }
+  },
+  mounted () {
+    console.log('container Width/Height: ', this.containerWidth, this.containerHeight)
+    window.addEventListener('resize', this.onResize)
+    this.onResize()
+  },
+  destroyed () {
+    window.removeEventListener('resize', this.onResize)
+  },
+  computed: {
+    wrapperStyle () {
+      let W = this.containerWidth
+      let H = this.containerHeight
+      let width = W * this.scale
+      let height = H * this.scale
+      let left = W * this.translateX + W * (1 - this.scale) / 2
+      let top = H * this.translateY + H * (1 - this.scale) / 2
+      return {
+        left: `${ left }px`,
+        top: `${ top }px`,
+        width: `${ width }px`,
+        height: `${ height }px`,
+      }
+    },
+  },
+  methods: {
+    onResize () {
+      let styles = window.getComputedStyle(this.$el)
+      this.containerWidth = parseFloat(styles.width)
+      this.containerHeight = parseFloat(styles.height)
+    },
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.vue-zoomer
+  position relative
+  overflow hidden
+  background-color hsla(0, 0%, 0%, 0.5)
+
+.zoomer
+  position absolute
+  & > img
+    // remove the 4px gap below the image
+    vertical-align top
+</style>