Raphael Js實現以滑鼠中心縮放paper
主要邏輯就是計算縮放前後滑鼠所在位置偏差,來調整view起點座標到滑鼠點。
var scale; window.onload=function(){ ............... ............... addWinWheelListener(winWheel); scale={vari:.02,zoom:1,w:_pgsz[2],h:_pgsz[3],x:0,y:0};//_pgsz[2],_pgsz[3];容器寬高 } /** *滑鼠滾輪縮放 * */ function winWheel(e){ var cw=_pgsz[2],ch=_pgsz[3];//容器寬高 var w=scale.w,h=scale.h,x=scale.x,y=scale.y; var vari=scale.vari-0; e=e || window.event; var cx=e.clientX; var cy=e.clientY; var dtl; if(e.wheelDelta){ dtl=e.wheelDelta; }else if(e.detail){ dtl=e.detail; } var px,py,nx,ny; var posv=1/scale.zoom; px=cx*posv;//原滑鼠位置 py=cy*posv; if(dtl<0){ if(scale.zoom<0.1) return; scale.zoom-=vari; }else{ if(scale.zoom>4.9) return; scale.zoom+=vari; } posv=1/scale.zoom; w=cw*posv; h=ch*posv; nx=cx*posv;//新滑鼠位置 ny=cy*posv; var dx=px-nx;//偏移量 var dy=py-ny; x+=dx; y+=dy; scale.w=w; scale.h=h; scale.x=x; scale.y=y; _r.setViewBox(scale.x,scale.y,scale.w,scale.h,false); } function addWinWheelListener(sfun){ if(document.addEventListener){ document.addEventListener('DOMMouseScroll',sfun,false); }//W3C window.onmousewheel=document.onmousewheel=sfun;//IE/Opera/Chrome/Safari }
Y
連結: https://pan.baidu.com/s/1eRR0xUE 密碼: kfis
相關推薦
Raphael Js實現以滑鼠中心縮放paper
主要邏輯就是計算縮放前後滑鼠所在位置偏差,來調整view起點座標到滑鼠點。 var scale; window.onload=function(){ ............... ........
ZK整合jqueryui 實現圖片滑鼠滾輪縮放以及拖拽位置
//@off image是一個zul中 的image元件 image.setWidgetOverride("bind_", "function(){\r\n"+ "this.$supers('bind_', arguments);\r\n
JS實現網頁背景旋轉縮放輪播效果
parse html char height sta api接口 圖片地址 wid col 實現效果:效果預覽 css代碼: .switch_images { display: inline-block; margin: 0; padding: 0
laya 下以光標為中心縮放對象
private 比例 lds scale tar 中心 mouse pre alex private MouseWheel(e: Laya.Event) { console.log("event"); let currentSp = e
iOS 設定錨點,以錨點為中心縮放
在CALayer中有一個很重要的概念,就是錨點,錨點是針對CALayer來說的,錨點到底是什麼呢?讓我們看看錨點到底是什麼?一下都是針對CALayer來說的。 首先我們先說一下什麼CALayer,CALayer就是一個圖層,可以讓我們看見的東西,但是他不具有事
使用計時器實現圖片的準確縮放
gree tin 實現 idt 放大 height tint onload ati <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
css3 transform:scale(x)實現字體的縮放:
edi 不變 screen info html -s clas 實現 背景 css3 transform:scale(x)字體的縮放: transform:scale(x),針對於整體的縮放,縮放的整體包括寬,高,背景。這自然對於內聯元素就無法使用此屬性,最好使用無屬性的s
iOS Swift 實現圖片點擊縮放回彈動畫
obj mean awake art 簡單 onf 點擊縮放 fork sde 效果就是下面這個樣子: 思路借鑒的是MZTimerLabel,有想過做一個自定義的ImageView,但那樣的話之前view用必須要改代碼,索性就按照MZTimerLabel這個方式實現,簡
vue中使用raphael.js實現地圖繪制
proc -c ima order ont .text mov += svg 一、效果圖 二、在vue中引入raphael.js npm i raphael -S 三、封裝一個名為StreetMap的組件,代碼如下 1 <template> 2
20.QT-Qpixmap實現圖片鼠標縮放,鼠標拖動示例(詳解)
下滑 resize pix slot https qpi map += als #include "widget.h" Widget::Widget(): BigButton("放大",this), LittleButton("縮小",this),
vue中實現圖片全屏縮放預覽,支援移動端
# 安裝 npm install vue-photo-preview --save # 引入 import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' Vue.use(pr
Fresco使用PhotoDraweeView 實現圖片的手勢縮放
1.gradle引入Fresco compile 'com.facebook.fresco:fresco:0.11.0+' 2.在application中初始化Fresco Fresco.initialize(this, ImagePipelineConfigFactory
Touch.js 手勢庫 拖動 縮放和 旋轉!!!
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="
JS實現div塊的拖放,調換位置
主要是HTML5 的拖放(Drag 和 Drop) 例子(不需要對div設定ID): <!DOCTYPE HTML> <html> <head> &l
JAVA實現圖片等比縮放,圖片擷取功能--封裝類
import java.awt.Graphics2D; import java.awt.Rectangle; import java.awt.RenderingHints; import java.awt.geom.AffineTransform; import java.
PNG透明圖片疊加(Opencv實現,包括旋轉縮放以及邊界處理)
疊加效果原圖疊加圖片大致實現了一個四通道的PNG向量圖疊加到一個三通道的圖片上,函式如下:bool 疊加(cv::Mat &dst, cv::Mat &src,double scale = 1.0, //整體透明度double size = 1.0,//圖片縮
使用Matlab實現對圖片的縮放
在做影象處理的時候,有時需要對圖片的畫素進行放大或則縮小。 使用Matlab很容易實現對影象的放大和縮小。這裡只講縮放到固定畫素的方法。 clear; clc; %清除以前的資料 folderN
canvas 滑鼠位置縮放圖形
最近再做 webcad , 需要在 canvas 上對圖形進行縮放,主要分為以下幾個步驟: 1、找到當前游標所在位置,確定其在相對 canvas 座標系的座標 繫結滑鼠滾輪事件,假定每次縮放比例 0.2 求滑鼠相對座標 p0 2、圖形由點組成,對每個點進行矩陣變換,得到變換後的座標
利用padding百分比繼承父級元素寬度特性實現元素寬高比例縮放
純 CSS 實現高度與寬度成比例的效果 最近在做一個產品列表頁面,佈局如下圖所示。頁面中有若干個 item,其中每個 item 都向左浮動,幷包含在自適應瀏覽器視窗寬度的父元素中。 item 元素的 CSS 定義如下: .item { float
自定義VideoView實現視訊畫面的縮放
1_自定義VideoView,增加設定視訊大小方法 public class VideoView extends android.widget.VideoView { /** Android系統在更加xml佈局找這個類,並且例項化的時候,用該構造方法例項化 @pa