摘要:效果如下圖所示如何實現反向裁剪呢筆者通過實踐,發現有以下幾種思路。使用合成模式通過設置的值,可以實現類似的反向裁剪的效果。示例代碼如下最終效果參考上面的圖形反向裁剪。
我們都知道在canvas 可以通過clip來實現剪裁功能,其步驟一般是先設置要裁剪的區域(路徑),然后通過ctx.clip()的實現裁剪,裁剪之后,后續的繪制只能在裁剪的區域顯示效果,比如如下一段代碼,實現了一個圓形裁剪:
ctx.beginPath(); ctx.arc(100,100,50,0,Math.PI*2); ctx.clip(); ctx.rect(0,0,200,200); ctx.fillStyle="red"; ctx.fill();
最終效果如下:
有的時候,我們希望能夠實現反向裁剪,比如上面例子中,我們希望是圓圈外面是裁剪區域,而不是圓圈內部是裁剪區域。這就是標題所說的反向裁剪。效果如下圖所示:
如何實現反向裁剪呢?
筆者通過實踐,發現有以下幾種思路。
通過設置globalCompositeOperation的值,可以實現類似的反向裁剪的效果。大致思路是:
首先繪制一個圖形(比如圓形),該圖形外部的區域將會是裁剪區域
設置globalCompositeOperation的值為source-out
然后繪制想要繪制的圖形(比如矩形)
示例代碼如下:
ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2); ctx.fillStyle = "red"; ctx.fill(); ctx.beginPath(); ctx.globalCompositeOperation = "source-out"; ctx.rect(0, 0, 200, 200); ctx.fillStyle = "red"; ctx.fill();
最終效果參考上面的圖形“反向裁剪”。
使用clip + clearRect方法另外一種思路是使用clip + clearRect方法,大概的思路如下:
首先繪制要繪制的圖形(比如矩形)
然后設置要反向裁剪的圖形的路徑(比如圓形)
然后調用clip ,再調用clearRect方法清除圓形區域的像素。
示例代碼如下:
ctx.beginPath(); ctx.rect(0, 0, 200, 200); ctx.fillStyle = "red"; ctx.fill(); ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2); ctx.clip(); ctx.clearRect(0, 0, 200, 200);
最終效果參考上面的圖形“反向裁剪”。
利用非零環繞原則我們知道非零環繞原則,可以通過調整路徑的方向(順時針和逆時針),來實現挖空的效果,大致思路如下:
首先構建一個大的區域路徑(順時針方向),比如矩形
然后構建一個小的區域路徑(逆時針方向),比如圓形
調用clip裁剪,然后繪制圖形
示例代碼如下:
ctx.beginPath(); ctx.rect(0, 0, 200, 200); //順時針方向 ctx.arc(100, 100, 50, 0, Math.PI * 2, true); // 逆時針方向 ctx.clip(); ctx.beginPath(); ctx.rect(0, 0, 200, 200); ctx.fillStyle = "red"; ctx.fill();
arc方法的最后一個參數可以控制順時針(false)和逆時針(true),而rect方法沒有,可以通過moveTo,lineTo,自己構建逆時針的rect方法,如下代碼所示:
function counterclockwiseRect(ctx, x, y, w, h) { ctx.moveTo(x, y); ctx.lineTo(x, y + h); ctx.lineTo(x + w, y + h); ctx.lineTo(x + w, y); ctx.lineTo(x, y); }
最終效果參考上面的圖形“反向裁剪”。
參考文檔https://stackoverflow.com/que...
https://stackoverflow.com/que...
http://caibaojian.com/canvas/...(非零環繞原則 )
歡迎關注公眾號“ITman彪叔”。彪叔,擁有10多年開發經驗,現任公司系統架構師、技術總監、技術培訓師、職業規劃師。熟悉Java、JavaScript、Python語言,熟悉數據庫。熟悉java、nodejs應用系統架構,大數據高并發、高可用、分布式架構。在計算機圖形學、WebGL、前端可視化方面有深入研究。對程序員思維能力訓練和培訓、程序員職業規劃有濃厚興趣。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101704.html
摘要:最近的一個客戶項目中,簡化的需求是繪制按照行列繪制很多個圓圈。等等,客戶要求繪制的極限是萬個,而且每次繪制不能卡頓。然后通過通過創建對象,并把的繪制上下文的指定為該對象。另外繪制的效果其實是沒有繪制的效果好的,鋸齒嚴重。 最近的一個客戶項目中,簡化的需求是繪制按照行列繪制很多個圓圈。需求看起來不難,上手就可以做,寫兩個for循環。 原始繪制方法 首先定義了很多Circle對象,在遍歷循...
摘要:實現原理簡單,純技術處理圖片,幾乎不需要用到相關知識面向人群急于使用頭像裁剪組件的同學。裁剪框初始寬高上傳圖片后,裁剪區將預設為最大裁剪范圍。支持矩形裁剪目前九宮僅支持將圖片裁剪為正方形,不能裁剪為矩形,該功能將在后續優化。 項目簡介 本組件是vue下的頭像裁剪組件,可以直接拷貝代碼使用,無需安裝依賴 使用九宮格進行裁剪,自由選擇裁剪區域。 實時預覽裁剪后效果。 可以將裁剪好的圖片,...
閱讀 617·2023-04-25 18:37
閱讀 2780·2021-10-12 10:12
閱讀 8315·2021-09-22 15:07
閱讀 564·2019-08-30 15:55
閱讀 3174·2019-08-30 15:44
閱讀 2194·2019-08-30 15:44
閱讀 1625·2019-08-30 13:03
閱讀 1560·2019-08-30 12:55