實現Canvas2D繪圖 使元素繞中心居中旋轉

　　我之前用canvas寫了個頭像剪切的demo，但是關於讓載入的圖片旋轉是個問題，雖然通過其它方法實現了，但是感覺並不太好，於是查了些資料，想試着重新做一下canvas的旋轉。

在開始之前，先讓我們來做一些准備工作:

(function () {
    // 設置畫布的寬高
    var width = 300,
        heigh = 100,
        cache = {}; // 存儲canvas上下文

    // 獲取繪圖上下文
    function getCtx(name, w, h) {
        var cv = document.getElementById(name),
            ctx = cv.getContext('2d'),
            wh = getWH(w, h);

        w = wh[0];
        h = wh[1];

        cv.width = w;
        cv.height = h;

        ctx && (cache['name'] = ctx);
        init(ctx);
        return ctx;
    }

    // 設置角度
    function (ctx, deg) {
        ctx.rotate(deg / 180 * Math.PI); // 轉成角度值
    }

    // 填充畫布
    function fill(ctx, color, arr) {
        ctx.fillStyle = color;
        ctx.fillRect(arr[0], arr[1], arr[2], arr[3]);
    }

    // 格式化畫布
    function init(ctx, w, h) {
        var color = '#333', // 填充背景色
            wh = getWH(w, h);

        w = wh[0];
        h = wh[1];

        fill(ctx, color, [0, 0, w, h]);
    }

    // 進行位移
    function translate(ctx, x, y) {
        ctx.translate(x, y);
    }

    function getWH(w, h) {
        w = w || width;
        h = h || height;
        return [w, h];
    }

})();

 

准備完畢，先來繪制一個簡單的矩形

　　

 // d1 2  var cv1 = getCtx('cv1'); 3 fill(cv1, '#fff', [125, 25, 50, 50]); 
					

　　然后，我們試着讓它旋轉10deg

 

// d2
    var cv2 = getCtx('cv2');
    rotate(cv2, 10);
    fill(cv2, '#fff', [125, 25, 50, 50]);

 

再看看旋轉30deg會變成什么樣

// d3
    var cv3 = getCtx('cv3');
    rotate(cv3, 30);
    fill(cv3, '#fff', [125, 25, 50, 50]);

 

 

現在已經可以看出了，canvas旋轉rotate是以畫布左上角為中心點旋轉的,由此我們可以想象得到90deg的樣子

(圖片已死)

.box2 {
        margin: 0 auto;
        width: 300px;
        line-height: 100px;
        background: #333;
        text-align: center;
        color: #fff;
    }

    .box3 {
        margin: 0 auto;
        width: 300px;
        line-height: 100px;
        background: #666;
        text-align: center;
        color: #fff;
        transform: rotate(90deg) translate(0, 200px);
    }

 

因此，就像css3通過transform-origin來修改旋轉的中心一樣的道理，我們使用translate為canvas修改旋轉中心即可 ctx.translate(canvas.width / 2, canvas.height / 2);
使左上角偏移到寬高的一半的位置(中點)

 

 

//d4
    var cv4 = getCtx('cv4');
    translate(cv4, width / 2, height / 2);
    fill(cv4, '#fff', [0, 0, width, height]);

 

那么現在再一次旋轉90deg會得到我們想要的效果嗎？

 

//d5
    var cv5 = getCtx('cv5');
    translate(cv5, width / 2, height / 2);
    rotate(cv5, 90);
    fill(cv5, '#fff', [0, 0, width, height]);

 

事實證明，還不行，但是已經靠近了，從現在看來只要再偏移一次回到原來的點就可以了就可以了

//d6
    var cv6 = getCtx('cv6');
    translate(cv6, width / 2, height / 2);
    rotate(cv6, 90);
    translate(cv6, -width / 2, -height / 2);
    fill(cv6, '#fff', [0, 0, width, height]);

 

至於為什么會這樣，請看下圖:

(圖片已死)

或者猛戳這里看示例！！

所以現在實現了圍繞中心旋轉，而實現元素居中就簡單了，正如以上的示例所展示的，正中的正方形已然居中，因為我在一開始就給它定好了剛好居中的開始坐標:

 fill(cv3, '#fff', [125, 25, 50, 50]);  
就好像position居中定位一樣，這里的居中定位也一樣計算:
 (默認寬高為300 * 100) 2 (width / 2) - (50 / 2) = 125; 3 (height / 2) - (50 / 2) = 25; 

我們把旋轉和居中這些來封裝一下，方便使用,代碼如下:

RotateCenter.prototype = {
        constructor: RotateCenter,

        init: function (id, w, h) {
            this.width = w = w || this.width;
            this.height = h = h || this.height;

            var canvas = this.getContext(id, '2d');

            // 設置寬高
            this.setSize(canvas, w, h);
        },

        // 獲取上下文
        getContext: function (id, type) {
            var canvas = document.getElementById(id),
                nowCtx = canvas.getContext(type);

            this.cache[id] = nowCtx;
            return canvas;
        },

        // 填充畫布
        fill: function (arr, color) {
            this.nowCtx.fillStyle = color;
            this.nowCtx.fillRect(arr[0], arr[1], arr[1] ? arr[1] : this.width, arr[2] ? arr[2] : this.height);
        },

        setSize: function (c, w, h) {
            c.width = w;
            c.height = h;
        },

        // 旋轉
        rotate: function (deg) {
            this.nowCtx.rotate(deg / 180 * Math.PI);
        },

        // 位移
        translate: function (x, y) {
            this.nowCtx.translate(x, y);
        },

        // 切換上下文
        checkout: function (id) {
            this.nowCtx = this.cache[id];
        },

        // 繪制不居中繞中心旋轉矩形
        rotateRect: function (arr, color, deg) {
            var w = this.width / 2,
                h = this.height / 2;

            this.translate(w, h);
            this.rotate(deg);
            this.translate(-w, -h);
            this.fill(arr, color);
        },

        // 繪制居中不繞中心旋轉矩形
        centerRect: function (width, height, color) {
            var w = this.width / 2,
                h = this.height / 2,
                w1 = width / 2,
                h1 = height / 2;

            this.fill([w - w1, h - h1, width, height], color);
        },

        // 繪制居中同時繞中心旋轉矩形
        centerRotateRect: function (width, height, deg, color) {
            var w = this.width / 2,
                h = this.height / 2,
                w1 = width / 2,
                h1 = height / 2;

            this.translate(w, h);
            this.rotate(deg);
            this.translate(-w, -h);
            this.fill([w - w1, h - h1, width, height], color);
        }
    };

 

現在來測試一下:

繪制居中同時繞中心旋轉矩形

45deg

// d7
    var rc = new RotateCenter();
    rc.init('cv7');
    rc.centerRotateRect(50, 50, 45, '#fff');

 

163deg

	 // d8 2  rc.init('cv8'); 3 rc.centerRotateRect(50, 50, 163, '#fff'); 
				

繪制居中不繞中心旋轉矩形

	 // d9 2  rc.init('cv9'); 3 rc.centerRect(60, 60, '#fff'); 
				

繪制不居中繞中心旋轉矩形

30deg

278deg

// d10
    rc.init('cv10');
    rc.rotateRect([50, 50, 50, 50], '#fff', 30);

    // d11
    rc.init('cv11');
    rc.rotateRect([50, 50, 50, 50], '#fff', 278);

 

從示例來看，rotateRect方法有點不太理想，而在這里想要的就是centerRotateRect方法的效果，所以到此OVER。

如有不正確的地方，歡迎指出!!!

 

/******************************************************** 優美的分割線 ********************************************************/

/************************************************ 更新時間：2019－01－24 ************************************************/

之前寫的內容只能實現中心旋轉，而由於在前陣子寫的一個關於canvas的封裝中又需要實現旋轉，而且是任意位置/任意角度的隨意旋轉，又找了不少資料和測試才實現了，所以在這里更新一下這篇文章!!!

先看效果:

 

這次的實現主要修改了一下需要繪制的每個元素的偏移，還有為了實現多個元素的不同角度旋轉，調用了save與restore這兩個函數

 

主要代碼如下:

ctx.save();
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.translate(x + (width / 2), y + (height) / 2);
ctx.rotate(deg * Math.PI / 180);
ctx.translate(-x - (width / 2), -y -(height / 2));
ctx.fillRect(x, y, width, height);
ctx.closePath();
ctx.fill();
ctx.restore();

 

完整代碼:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="./1.js"></script>
    <style type="text/css">
        canvas {
            background: #333;
        }

        strong {
            color: #f00;
        }
    </style>
</head>
<body>
    <h1>Canvas Rotate</h1>
    <h3>#1 <strong>不居中旋轉30deg</strong></h3>
    <canvas id="cv"></canvas>
    <h3>#2 <strong>不居中旋轉60deg</strong></h3>
    <canvas id="cv1"></canvas>
    <h3>#3 <strong>不居中繪制多個, 旋轉45deg, 160deg</strong></h3>
    <canvas id="cv2"></canvas>
    <h3>#4 <strong>自定義旋轉</strong></h3>
    <p>
        <span>deg:</span>
        <input type="range" id="range" max="360" min="0" value="45">
        <span id="nowDeg">45deg</span>
    </p>
    <canvas id="cv3"></canvas>
    <script type="text/javascript">
        {
            function Rotate(id, x, y, width, height, deg) {
                if (!Rotate.initer) {
                    Rotate.initer = new Rotate.init();
                    Rotate.initer.fill(id, x, y, width, height, deg);
                }

                Rotate.initer.fill(id, x, y, width, height, deg);
                return Rotate.initer;
            }

            Rotate.init = function () {
                this.defaultWidth = 300;
                this.defaultHeight = 200;
                this.ctx = null;
            };

            Rotate.prototype = {
                constrcutor: Rotate,
                fill: function (id, x, y, width, height, deg, add) {
                    !add && this.getCanvas(id);
                    let ctx = this.getContext();

                    ctx.save();
                    ctx.beginPath();
                    ctx.fillStyle = '#fff';
                    ctx.translate(x + (width / 2), y + (height) / 2);
                    ctx.rotate(deg * Math.PI / 180);
                    ctx.translate(-x - (width / 2), -y -(height / 2));
                    ctx.fillRect(x, y, width, height);
                    ctx.closePath();
                    ctx.fill();
                    ctx.restore();
                },
                addFill: function (x, y, width, height, deg) {
                    this.fill(null, x, y, width, height, deg, true);
                },
                getCanvas: function (id) {
                    this.canvas = document.getElementById(id);
                    this.canvas.width = this.defaultWidth;
                    this.canvas.height = this.defaultHeight;
                },
                getContext: function () {
                    this.ctx = this.canvas.getContext('2d');
                    return this.ctx;
                },
                clear: function () {
                    this.ctx.clearRect(0, 0, this.defaultWidth, this.defaultHeight);
                }
            };

            Rotate.init.prototype = Rotate.prototype;


            Rotate('cv', 50, 50, 50, 50, 30); // 不居中旋轉30deg
            Rotate('cv1', 50, 50, 50, 50, 60); // 不居中旋轉60deg
            Rotate('cv2', 50, 50, 50, 50, 45).addFill(150, 50, 50, 50, 160); // 不居中繪制多個, 旋轉45deg, 160deg

            /*
            * 自定義旋轉
            */
            let nowDeg = document.getElementById('nowDeg'),
                cv3 = Rotate('cv3', 50, 50, 50, 50, 45);

            document.getElementById('range').addEventListener('change', function (e) {
                nowDeg.innerHTML = `${this.value}deg`;
                cv3.clear();
                cv3.addFill(50, 50, 50, 50, parseInt(this.value));
            }, false);
        }
    </script>
</body>
</html>

 

關於canvas的封裝，有興趣的可以來看看: https://gitee.com/nowtd/cnavas_engine