@xysfe/actui/es/assets/common/scrollZoom/components/bubble.js

A fantastic mobile ui lib implement by Vue

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["assets/common/scrollZoom/components/bubble.js"]=e():t["assets/common/scrollZoom/components/bubble.js"]=e()}("undefined"!=typeof self?self:this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var r=i[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var i={};return e.m=t,e.c=i,e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="../es",e(e.s=193)}({120:function(t,e,i){"use strict";e.a={props:{y:{type:Number,default:0}},data:function(){return{width:50,height:80}},computed:{distance:function(){return Math.max(0,Math.min(this.y*this.ratio,this.maxDistance))},style:function(){return"width:"+this.width/this.ratio+"px;height:"+this.height/this.ratio+"px"}},created:function(){this.ratio=window.devicePixelRatio,this.width*=this.ratio,this.height*=this.ratio,this.initRadius=18*this.ratio,this.minHeadRadius=12*this.ratio,this.minTailRadius=5*this.ratio,this.initArrowRadius=10*this.ratio,this.minArrowRadius=6*this.ratio,this.arrowWidth=3*this.ratio,this.maxDistance=40*this.ratio,this.initCenterX=25*this.ratio,this.initCenterY=25*this.ratio,this.headCenter={x:this.initCenterX,y:this.initCenterY}},mounted:function(){this._draw()},methods:{_draw:function(){var t=this.$refs.bubble,e=t.getContext("2d");e.clearRect(0,0,t.width,t.height),this._drawBubble(e),this._drawArrow(e)},_drawBubble:function(t){t.save(),t.beginPath();var e=this.distance/this.maxDistance,i=this.initRadius-(this.initRadius-this.minHeadRadius)*e;this.headCenter.y=this.initCenterY-(this.initRadius-this.minHeadRadius)*e,t.arc(this.headCenter.x,this.headCenter.y,i,0,Math.PI,!0);var n=this.initRadius-(this.initRadius-this.minTailRadius)*e,r={x:this.headCenter.x,y:this.headCenter.y+this.distance},s={x:r.x-n,y:r.y},o={x:s.x,y:s.y-this.distance/2};t.quadraticCurveTo(o.x,o.y,s.x,s.y),t.arc(r.x,r.y,n,Math.PI,0,!0);var a={x:this.headCenter.x+i,y:this.headCenter.y},h={x:r.x+n,y:a.y+this.distance/2};t.quadraticCurveTo(h.x,h.y,a.x,a.y),t.fillStyle="rgb(170,170,170)",t.fill(),t.strokeStyle="rgb(153,153,153)",t.stroke(),t.restore()},_drawArrow:function(t){t.save(),t.beginPath();var e=this.distance/this.maxDistance,i=this.initArrowRadius-(this.initArrowRadius-this.minArrowRadius)*e;t.arc(this.headCenter.x,this.headCenter.y,i-(this.arrowWidth-e),-Math.PI/2,0,!0),t.arc(this.headCenter.x,this.headCenter.y,i,0,3*Math.PI/2,!1),t.lineTo(this.headCenter.x,this.headCenter.y-i-this.arrowWidth/2+e),t.lineTo(this.headCenter.x+2*this.arrowWidth-2*e,this.headCenter.y-i+this.arrowWidth/2),t.lineTo(this.headCenter.x,this.headCenter.y-i+3*this.arrowWidth/2-e),t.fillStyle="rgb(255,255,255)",t.fill(),t.strokeStyle="rgb(170,170,170)",t.stroke(),t.restore()}},watch:{y:function(){this._draw()}}}},193:function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(120),r=i(194),s=i(8),o=Object(s.a)(n.a,r.a,r.b,!1,null,null,null);o.options.__file="src\\components\\common\\scrollZoom\\components\\bubble.vue",e.default=o.exports},194:function(t,e,i){"use strict";i.d(e,"a",function(){return n}),i.d(e,"b",function(){return r});var n=function(){var t=this,e=t.$createElement;return(t._self._c||e)("canvas",{ref:"bubble",style:t.style,attrs:{width:t.width,height:t.height}})},r=[];n._withStripped=!0},8:function(t,e,i){"use strict";function n(t,e,i,n,r,s,o,a){t=t||{};var h=typeof t.default;"object"!==h&&"function"!==h||(t=t.default);var d="function"==typeof t?t.options:t;e&&(d.render=e,d.staticRenderFns=i,d._compiled=!0),n&&(d.functional=!0),s&&(d._scopeId=s);var u;if(o?(u=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},d._ssrRegister=u):r&&(u=a?function(){r.call(this,this.$root.$options.shadowRoot)}:r),u)if(d.functional){d._injectStyles=u;var c=d.render;d.render=function(t,e){return u.call(e),c(t,e)}}else{var l=d.beforeCreate;d.beforeCreate=l?[].concat(l,u):[u]}return{exports:t,options:d}}e.a=n}})});