canvas繪圖按照contain或者cover方式適配，并居中顯示

tianyu 發(fā)布于2019-08-30 15:55 / 2000人閱讀

摘要：保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。圖片按照模式放到固定盒子的矩形內(nèi)，則需要對圖片進行一定的縮放。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取。

canvas繪圖時drawImage，需要繪制的圖片大小不同，比例各異，所以就需要像html+css布局那樣，需要contain和cover來滿足不同的需求。

contain

保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。

圖片按照contain模式放到固定盒子的矩形內(nèi)，則需要對圖片進行一定的縮放。
原則是：

如果圖片寬高不等，使圖片的長邊能完全顯示出來，則原圖片高的一邊縮放后等于固定盒子對應的一邊，等比例求出另外一邊，

如果圖片寬高相等，則根據(jù)固定盒子的寬高來決定縮放后圖片的寬高，固定盒子的寬大于高，則縮放后的圖片高等于固定盒子的高度，對應求出另外一邊即可，反之亦然。

        /**
         * @param {Number} sx 固定盒子的x坐標,sy 固定盒子的y左標
         * @param {Number} box_w 固定盒子的寬, box_h 固定盒子的高
         * @param {Number} source_w 原圖片的寬, source_h 原圖片的高
         * @return {Object} {drawImage的參數(shù)，縮放后圖片的x坐標，y坐標，寬和高},對應drawImage(imageResource, dx, dy, dWidth, dHeight)
         */
        function containImg(sx, sy , box_w, box_h, source_w, source_h){
            var dx = sx,
                dy = sy,
                dWidth = box_w,
                dHeight = box_h;
            if(source_w > source_h || (source_w == source_h && box_w < box_h)){
                dHeight = source_h*dWidth/source_w;
            dy =  sy + (box_h-dHeight)/2;

            }else if(source_w < source_h || (source_w == source_h && box_w > box_h)){
                dWidth = source_w*dHeight/source_h;
                dx = sx + (box_w-dWidth)/2;
            }
            return{
                dx,
                dy,
                dWidth,
                dHeight
            }
        }


        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.fillStyle = "#e1f0ff";
        //固定盒子的位置和大小--圖片需要放在這個盒子內(nèi)
        ctx.fillRect(30, 30, 150, 200);

        var img = new Image();
        img.onload = function () {
            console.log(img.width,img.height);
            
            var imgRect = containImg(30,30,150,200,img.width,img.height);
            console.log("imgRect",imgRect);
            ctx.drawImage(img, imgRect.dx, imgRect.dy, imgRect.dWidth, imgRect.dHeight); 
            
        }
        img.src = "./timg2.jpg";  
        //注：img預加載模式下，onload應該放在為src賦值的上面，以避免已有緩存的情況下無法觸發(fā)onload事件從而導致onload中的事件不執(zhí)行的情況發(fā)生

cover

保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取。

原理：

按照固定盒子的比例截取圖片的部分

        /**
         * @param {Number} box_w 固定盒子的寬, box_h 固定盒子的高
         * @param {Number} source_w 原圖片的寬, source_h 原圖片的高
         * @return {Object} {截取的圖片信息}，對應drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)參數(shù)
        */
        function coverImg(box_w, box_h, source_w, source_h){
            var sx = 0,
                sy = 0,
                sWidth = source_w,
                sHeight = source_h;
            if(source_w > source_h || (source_w == source_h && box_w < box_h)){
                sWidth = box_w*sHeight/box_h;
                sx = (source_w-sWidth)/2;
            }else if(source_w < source_h || (source_w == source_h && box_w > box_h)){
                sHeight = box_h*sWidth/box_w;
                sy = (source_h-sHeight)/2;
            }
            return{
                sx,
                sy,
                sWidth,
                sHeight
            }
        }


        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.fillStyle = "#e1f0ff";
        //固定盒子的位置和大小--圖片需要放在這個盒子內(nèi)
        ctx.fillRect(30, 30, 150, 200);

        var img = new Image();
        img.onload = function () {
            console.log(img.width,img.height);
            
            var imgRect = coverImg(150,200,img.width,img.height);
            console.log("imgRect",imgRect);
            ctx.drawImage(img, imgRect.sx, imgRect.sy, imgRect.sWidth, imgRect.sHeight, 30, 30, 150, 200); 
        }
        img.src = "./timg2.jpg";  
        //注：img預加載模式下，onload應該放在為src賦值的上面，以避免已有緩存的情況下無法觸發(fā)onload事件從而導致onload中的事件不執(zhí)行的情況發(fā)生

云服務器 GPU云服務器按照云計算服務的方式和服務對象的范圍截圖保存并顯示居中顯示 java修改值并顯示

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/117373.html

canvas繪圖按照contain或者cover方式適配，并居中顯示

摘要：保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。圖片按照模式放到固定盒子的矩形內(nèi)，則需要對圖片進行一定的縮放。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取。 canvas繪圖時drawImage，需要繪制的圖片大小不同，比例各異，所以就需要像html+css布局那樣，需要contain和cover來滿足不同的需求。 contain 保持縱橫比縮放圖片，使圖片的長...

jayzou 2019-08-23 15:13 評論0 收藏0
canvas繪圖按照contain或者cover方式適配，并居中顯示

摘要：保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。圖片按照模式放到固定盒子的矩形內(nèi)，則需要對圖片進行一定的縮放。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取。 canvas繪圖時drawImage，需要繪制的圖片大小不同，比例各異，所以就需要像html+css布局那樣，需要contain和cover來滿足不同的需求。 contain 保持縱橫比縮放圖片，使圖片的長...

novo 2019-08-02 14:15 評論0 收藏0
使用CANVAS實現(xiàn)交互性圓形馬賽克效果

摘要：在中任意從本地選擇一張圖片，然后通過鼠標移動或者移動端就能實現(xiàn)圓形分裂的效果。個人習慣在構造函數(shù)最后加上方法，方法里做一些準備工作，完成前的一些必要的事情。繪制第一個，也是最大的一個圓形。在看D3.js的時候，無意間看到了一個例子，覺得很有趣，像是會分裂的圓形馬賽克?？戳讼麓a，使用svg完成的，但是具體實現(xiàn)方式使得在手機端無法把玩，于是就自己實現(xiàn)了一個canvas版本的。代碼很簡單...

Aklman 2019-08-21 11:27 評論0 收藏0
使用CANVAS實現(xiàn)交互性圓形馬賽克效果

摘要：在中任意從本地選擇一張圖片，然后通過鼠標移動或者移動端就能實現(xiàn)圓形分裂的效果。個人習慣在構造函數(shù)最后加上方法，方法里做一些準備工作，完成前的一些必要的事情。繪制第一個，也是最大的一個圓形。在看D3.js的時候，無意間看到了一個例子，覺得很有趣，像是會分裂的圓形馬賽克?？戳讼麓a，使用svg完成的，但是具體實現(xiàn)方式使得在手機端無法把玩，于是就自己實現(xiàn)了一個canvas版本的。代碼很簡單...

starsfun 2019-08-01 16:08 評論0 收藏0
移動端布局與適配

摘要：實戰(zhàn)之微信錢包騰訊服務界面網(wǎng)格布局是讓開發(fā)人員設計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。 grid實戰(zhàn)之微信錢包騰訊服務界面 CSS3網(wǎng)格布局是讓開發(fā)人員設計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動制作一個網(wǎng)格，實際上是你將一個元素聲明為一個網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。移動端頁面適配—...

Clect 2019-08-29 14:08 評論0 收藏0