国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

超級(jí)小的web手勢(shì)庫(kù)AlloyFinger發(fā)布

ymyang / 3599人閱讀

摘要：擁有兩個(gè)版本，無(wú)依賴(lài)的獨(dú)立版和版本。除了對(duì)象，也可監(jiān)聽(tīng)內(nèi)元素的手勢(shì)需要引擎內(nèi)置對(duì)象支持綁定相關(guān)事件。據(jù)不完全統(tǒng)計(jì)，目前服務(wù)于興趣部落群動(dòng)漫騰訊學(xué)院騰訊等多個(gè)部門(mén)團(tuán)隊(duì)和項(xiàng)目。也可以在事件回調(diào)里根據(jù)攜帶的信息使用去操作。

簡(jiǎn)介

針對(duì)多點(diǎn)觸控設(shè)備編程的Web手勢(shì)組件，快速幫助你的web程序增加手勢(shì)支持，也不用再擔(dān)心click 300ms的延遲了。擁有兩個(gè)版本，無(wú)依賴(lài)的獨(dú)立版和react版本。除了Dom對(duì)象，也可監(jiān)聽(tīng)Canvas內(nèi)元素的手勢(shì)（需要Canvas引擎內(nèi)置對(duì)象支持addEventListener綁定touch相關(guān)事件）。
據(jù)不完全統(tǒng)計(jì)，目前AlloyFinger服務(wù)于：興趣部落、QQ群、QQ動(dòng)漫、騰訊學(xué)院、TEDxTencent、 AlloyTeam、騰訊CDC等多個(gè)部門(mén)、團(tuán)隊(duì)和項(xiàng)目。

功能清單

極小的文件大小
簡(jiǎn)潔的API設(shè)計(jì)
優(yōu)秀的性能
豐富的手勢(shì)支持
雙版本（react和獨(dú)立版）

事件

支持pinch縮放
支持rotate旋轉(zhuǎn)
支持pressMove拖拽
支持doubleTap雙擊
支持swipe滑動(dòng)
支持longTap長(zhǎng)按
支持tap按
支持singleTap單擊

快速上手

獨(dú)立版使用方式:

//element為需要監(jiān)聽(tīng)手勢(shì)的dom對(duì)象
new AlloyFinger(element, {
    pointStart: function () {
        //手指觸摸屏幕觸發(fā)
    },
    multipointStart: function () {
        //一個(gè)手指以上觸摸屏幕觸發(fā)
    },
    rotate: function (evt) {
        //evt.angle代表兩個(gè)手指旋轉(zhuǎn)的角度
        console.log(evt.angle);
    },
    pinch: function (evt) {
        //evt.scale代表兩個(gè)手指縮放的比例
        console.log(evt.scale);
    },
    multipointEnd: function () {
        //當(dāng)手指離開(kāi)，屏幕只剩一個(gè)手指或零個(gè)手指觸發(fā)
    },
    pressMove: function (evt) {
        //evt.deltaX和evt.deltaY代表在屏幕上移動(dòng)的距離
        console.log(evt.deltaX);
        console.log(evt.deltaY);
    },
    tap: function (evt) {
        //點(diǎn)按觸發(fā)
    },
    doubleTap: function (evt) {
        //雙擊屏幕觸發(fā)
    },
    longTap: function (evt) {
        //長(zhǎng)按屏幕750ms觸發(fā)
    },
    swipe: function (evt) {
        //evt.direction代表滑動(dòng)的方向
        console.log("swipe" + evt.direction);
    },
    singleTap: function (evt) {
        //單擊
    }
});

react版使用方式:

render() {
    return (
        
            
你要監(jiān)聽(tīng)手勢(shì)的Dom!

        
    );
}
官網(wǎng)DEMO

http://alloyteam.github.io/AlloyFinger/

Q&A

1.必須跟transformjs一起用嗎？
不必須。也可以在事件回調(diào)里根據(jù)evt攜帶的信息使用js去操作CSS3。但是一起用，會(huì)讓代碼更簡(jiǎn)潔。
2.pinch、rotate事件怎么在chrome瀏覽器調(diào)試的？
一般用真機(jī)調(diào)試，但是也可以使用chrome瀏覽器，傳送門(mén) http://www.html5rocks.com/en/mobile/touch/#toc-touchdev
3.縮放的origin點(diǎn)設(shè)置，這里是想手在圖片哪個(gè)區(qū)域操作就設(shè)置哪里為origin進(jìn)行縮放?
自己去計(jì)算就是兩個(gè)手指的連線的中點(diǎn)的坐標(biāo)，

比如中點(diǎn)X：

   pinch: function (evt) { 
        console.log((evt.touch[0].pageX+evt.touch[1].pageX)/2);
    },

然后根據(jù)這個(gè)坐標(biāo)和圖片的坐標(biāo)計(jì)算圖片縮放的origin
4.拖拽位置、縮放大小是否可以限制（始終在屏幕內(nèi)顯示，避免出現(xiàn)縮到很小看不到的情況）
這個(gè)不應(yīng)該有 AlloyFinger 控制。而應(yīng)該由你的邏輯去控制

Github

https://github.com/AlloyTeam/AlloyFinger

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/79557.html

相關(guān)文章

  • AlloyFinger web 手勢(shì)學(xué)習(xí)

    摘要：從長(zhǎng)按開(kāi)始學(xué)習(xí)手勢(shì)在項(xiàng)目開(kāi)發(fā)過(guò)程中遇到有虛擬鍵盤(pán)開(kāi)發(fā)的需求如下圖，其中刪除鍵需要實(shí)現(xiàn)長(zhǎng)按刪除輸入框全部?jī)?nèi)容，由此展開(kāi)今天要討論的手勢(shì)開(kāi)發(fā)內(nèi)容。所以長(zhǎng)按手勢(shì)實(shí)際上是由三者共同模擬的效果。 從 [長(zhǎng)按] 開(kāi)始學(xué)習(xí) web 手勢(shì) 在項(xiàng)目開(kāi)發(fā)過(guò)程中遇到有虛擬鍵盤(pán)開(kāi)發(fā)的需求（如下圖），其中刪除鍵需要實(shí)現(xiàn) 長(zhǎng)按 刪除輸入框全部?jī)?nèi)容，由此展開(kāi)今天要討論的 web 手勢(shì) 開(kāi)發(fā)內(nèi)容。 showImg(h...

    seanlook 評(píng)論0 收藏0

  • 超小Web手勢(shì)庫(kù)AlloyFinger原理

    摘要：目前作為騰訊手機(jī)手勢(shì)解決方案，在各大項(xiàng)目中都發(fā)揮著作用。因此也入選了騰訊平臺(tái)的精品組件除了國(guó)內(nèi)外的項(xiàng)目團(tuán)隊(duì)都在使用，國(guó)內(nèi)外的各大網(wǎng)站也進(jìn)行了轉(zhuǎn)載報(bào)道，作為超級(jí)小的手勢(shì)庫(kù)，騰訊的項(xiàng)目為什么不選擇而選擇下面從各個(gè)角度架構(gòu)原理上進(jìn)行一下分析。 目前AlloyFinger作為騰訊手機(jī)QQ web手勢(shì)解決方案，在各大項(xiàng)目中都發(fā)揮著作用。感興趣的同學(xué)可以去Github看看： https://git...

    Karuru 評(píng)論0 收藏0

  • 基礎(chǔ)觸屏手勢(shì)學(xué)習(xí)

    摘要：最近接到一個(gè)小的項(xiàng)目，需要實(shí)現(xiàn)觸屏滑動(dòng)，圖片縮放旋轉(zhuǎn)移動(dòng)，故而花了三天時(shí)間學(xué)習(xí)并實(shí)現(xiàn)了一下，在此記錄一下學(xué)習(xí)過(guò)程關(guān)鍵就是觸屏手勢(shì)用到的技術(shù)過(guò)渡轉(zhuǎn)換我就不說(shuō)了，與是屬于輕量級(jí)的觸屏手勢(shì)封裝庫(kù)，其中水平移動(dòng)用的是別的功能用的是。 最近接到一個(gè)小的項(xiàng)目，需要實(shí)現(xiàn)觸屏滑動(dòng)，圖片縮放旋轉(zhuǎn)移動(dòng)，故而花了三天時(shí)間學(xué)習(xí)并實(shí)現(xiàn)了一下，在此記錄一下學(xué)習(xí)過(guò)程：關(guān)鍵就是css、 觸屏手勢(shì)用到的技術(shù)：css過(guò)...

    leo108 評(píng)論0 收藏0

  • 基礎(chǔ)觸屏手勢(shì)學(xué)習(xí)

    摘要：最近接到一個(gè)小的項(xiàng)目，需要實(shí)現(xiàn)觸屏滑動(dòng)，圖片縮放旋轉(zhuǎn)移動(dòng)，故而花了三天時(shí)間學(xué)習(xí)并實(shí)現(xiàn)了一下，在此記錄一下學(xué)習(xí)過(guò)程關(guān)鍵就是觸屏手勢(shì)用到的技術(shù)過(guò)渡轉(zhuǎn)換我就不說(shuō)了，與是屬于輕量級(jí)的觸屏手勢(shì)封裝庫(kù)，其中水平移動(dòng)用的是別的功能用的是。 最近接到一個(gè)小的項(xiàng)目，需要實(shí)現(xiàn)觸屏滑動(dòng)，圖片縮放旋轉(zhuǎn)移動(dòng)，故而花了三天時(shí)間學(xué)習(xí)并實(shí)現(xiàn)了一下，在此記錄一下學(xué)習(xí)過(guò)程：關(guān)鍵就是css、 觸屏手勢(shì)用到的技術(shù)：css過(guò)...

    leanxi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

ymyang

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<