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

資訊專欄INFORMATION COLUMN

canvas離屏技術(shù)與放大鏡實(shí)現(xiàn)

MartinDai / 3652人閱讀

摘要：教程所示圖片使用的是倉庫圖片，網(wǎng)速過慢的朋友請(qǐng)移步原文離屏技術(shù)與放大鏡實(shí)現(xiàn)。為了方便講解，本文分為個(gè)應(yīng)用部分實(shí)現(xiàn)水印和中心縮放實(shí)現(xiàn)放大鏡什么是離屏技術(shù)什么是離屏技術(shù)學(xué)習(xí)和濾鏡實(shí)現(xiàn)介紹過接口。這就是離屏技術(shù)。

教程所示圖片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請(qǐng)移步>>> （原文）canvas 離屏技術(shù)與放大鏡實(shí)現(xiàn)。

更多討論或者錯(cuò)誤提交，也請(qǐng)移步。

利用canvas除了可以實(shí)現(xiàn)濾鏡，還可以利用離屏技術(shù)放大鏡功能。

為了方便講解，本文分為 2 個(gè)應(yīng)用部分：

  1. 實(shí)現(xiàn)水印和中心縮放
  2. 實(shí)現(xiàn)放大鏡

1. 什么是離屏技術(shù)？

canvas 學(xué)習(xí)和濾鏡實(shí)現(xiàn)介紹過drawImage接口。除了繪制圖像，這個(gè)接口還可以：將一個(gè)canvas對(duì)象繪制到另一個(gè)canvas對(duì)象上。這就是離屏技術(shù)。

2. 實(shí)現(xiàn)水印和中心縮放

在代碼中，有兩個(gè) canvas 標(biāo)簽。分別是可見與不可見。不可見的 canvas 對(duì)象上的 Context 對(duì)象，就是我們放置圖像水印的地方。

更多詳解，請(qǐng)看代碼注釋：




  
  Learn Canvas

實(shí)現(xiàn)效果如下圖所示：

拖動(dòng)滑竿，即可放大和縮小圖像。然后右鍵保存圖像。保存后的圖像，就有已經(jīng)有了水印，如下圖所示：

3. 實(shí)現(xiàn)放大鏡

在上述中心縮放的基礎(chǔ)上，實(shí)現(xiàn)放大鏡主需要注意以下 2 個(gè)部分：

  1. 細(xì)化處理canvas的鼠標(biāo)響應(yīng)事件：滑入、滑出、點(diǎn)擊和松開
  2. 重新計(jì)算離屏坐標(biāo)（詳細(xì)公式計(jì)算思路請(qǐng)見代碼注釋）
  3. 重新計(jì)算鼠標(biāo)相對(duì)于 canvas 標(biāo)簽的坐標(biāo)（詳細(xì)公式計(jì)算思路請(qǐng)見代碼注釋）

代碼如下：




  
  Document

放大鏡效果如下圖所示(被紅筆標(biāo)出的區(qū)域就是我們的正方形放大鏡)：

歡迎入群：857989948 。IT 技術(shù)深度交流和分享，涉及方面包括但不限于：網(wǎng)站制作、運(yùn)營、UI 設(shè)計(jì)、算法分析、大數(shù)據(jù)、人工智能等。本群主打有深度、有態(tài)度的技術(shù)交流，歡迎熱衷記錄知識(shí)的您的加入。

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

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

相關(guān)文章

  • canvas離屏技術(shù)與放大鏡實(shí)現(xiàn)

    摘要：教程所示圖片使用的是倉庫圖片，網(wǎng)速過慢的朋友請(qǐng)移步原文離屏技術(shù)與放大鏡實(shí)現(xiàn)。為了方便講解，本文分為個(gè)應(yīng)用部分實(shí)現(xiàn)水印和中心縮放實(shí)現(xiàn)放大鏡什么是離屏技術(shù)學(xué)習(xí)和濾鏡實(shí)現(xiàn)介紹過接口。這就是離屏技術(shù)。 教程所示圖片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請(qǐng)移步>>> （原文）canvas 離屏技術(shù)與放大鏡實(shí)現(xiàn)。 更多討論或者錯(cuò)誤提交，也請(qǐng)移步。 利用canvas除了可以實(shí)現(xiàn)濾鏡，還可以...

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

  • 我從 fabric.js 中學(xué)到了什么

    摘要：前言熟悉的朋友想必都使用或者聽說過，算是一個(gè)元老級(jí)的庫了，從第一個(gè)版本發(fā)布到現(xiàn)在，已經(jīng)有年時(shí)間了。中緩存是默認(rèn)開啟的，同時(shí)也可以設(shè)置為禁用。處理屏屏幕模糊的問題，直接給出處理方法，就不展開說了。 前言 熟悉 canvas 的朋友想必都使用或者聽說過 Fabric.js，F(xiàn)abric 算是一個(gè)元老級(jí)的 canvas 庫了，從第一個(gè)版本發(fā)布到現(xiàn)在，已經(jīng)有 8 年時(shí)間了。我近一年時(shí)間也在項(xiàng)目...

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

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

0條評(píng)論

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