zoukankan      html  css  js  c++  java
  • js -- canvas img 封装

    鼠标   1.操作canvas 中的 img。 右键放大缩小,左键移动img。 

       2.拖动input type= range  改变图片的透明度

    html 代码 

    <!DOCTYPE html>
    <html lang="en" oncontextmenu="doNothing()">
    <head>
        <meta charset="UTF-8">
        <title>图片已中心店的坐标缩放</title>
        <style>
            #box1 {
                 500px;
                height: 300px;
                border: 1px solid black;
                overflow: hidden;
                float: left;
            }
    
            #box2 {
                 500px;
                height: 300px;
                border: 1px solid black;
                overflow: hidden;
                float: left;
                margin-left: 50px;
                box-sizing: border-box;
            }
        </style>
        <script type="text/javascript">function ss() {
            if (event.button == 2) {
                alert("aaaa");
            }
            document.onmousedown = ss;
        }</script>
    </head>
    <body>
    <div>
        <div id="box1">
            <canvas id="cas1" width="500" height="300"></canvas>
        </div>
        <div id='box2'>
            <canvas id="cas2" width="500" height="300"></canvas>
        </div>
        <div style="clear: both"></div>
    </div>
    <input type="range" id="inp_d" value="0">
    </body>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="./index.js"></script>
    </html>

    js 代码

    /**
     * Created by Administrator on 2018/7/6.
     */
    function doNothing() {
        window.event.returnValue = false;
        return false;
    }
    
    var imgX = 0;
    var imgY = 0;
    var imgScale = 1;
    var val = 0;
    window.onload = function (event) {
        var count = [
            {cas2: 'cas1', box2: '#box1,#box2', path: './2.jpg', callback: imgOnload_callbak, scale: methods,icon_img:'./4.jpg,./5.jpg',inp_id:'#inp_d,#inp_d'},
            {cas2: 'cas2', box2: '#box1,#box2,',path: './3.jpg', callback: imgOnload_callbak, scale: methods,icon_img:'./5.jpg,./4.jpg',inp_id:'#inp_d,#inp_d'}
        ];
        for (var i = 0; i < count.length; i++) {
            getElement(count[i].cas2, count[i].box2, count[i].path, count[i].callback, count[i].scale,count[i].icon_img,count[i].inp_id)
        }
    };
    
    function getElement(cas_id, box_id, img_src, imgOnload_call, methods,icon_img,inp_id) {
        var canvas = document.getElementById(cas_id);
        var box = document.getElementById(box_id);
        var arr = box_id.split(',');
        var context = canvas.getContext('2d');
        var img = new Image();
        var img1 = new Image();
        var img1_arr = icon_img.split(',');
        img.src = img_src;
        for(var i = 0; i < img1_arr.length;i++){
            img1.src = img1_arr[i];
        }
        imgOnload_call(img, context, canvas, img1);
        methods(arr, canvas, context, img,img1);
        inp_methods(inp_id,context,canvas,img,img1)
    }
    
    function imgOnload_callbak(img,context,canvas,img1) {
        img.onload = function () {
            context.globalAlpha = 1.0;
            context.drawImage(img, 0, 0);
        };
        img1.onload = function (){
            setTimeout(function(){
                context.globalAlpha = 0;
                context.drawImage(img1,0,0,img1.width,img1.height,0,0,img1.width,img1.height);
            },50);
        }
    }
    
    function methods(elements, canvas, context, img,img1) {
        var img_y = 1;
        elements.forEach(function (item, i) {
            $(item).mousedown(function (event) {
                console.log(val);
                var e_btn = event.button;
                if (e_btn == 2) {
                    var e_down_y = event.clientY;
                    $(item).mousemove(function (event) {
                        var e_move_y = event.clientY;
                        if (e_move_y < e_down_y) {
                            img_y *= 1.01;
                        } else {
                            img_y /= 1.01;
                        }
                        e_down_y = e_move_y;
                        img_y = (img_y > 1) ? img_y : 1;
                        canvas.style.transform = "scale(" + img_y + "," + img_y + ")"
                    });
                    $(item).mouseup(function () {
                        $(item).unbind('mousemove');
                        $(item).unbind('mouseup');
                    })
                }
                else if (e_btn == 0) {
                    var e_drag_down = {
                        x: event.clientX,
                        y: event.clientY
                    };
                    $(item).mousemove(function (event) {
                        var e_drag_move = {
                            x: event.clientX,
                            y: event.clientY
                        };
                        var e_drag_distance = {
                            x: e_drag_move.x - e_drag_down.x,
                            y: e_drag_move.y - e_drag_down.y
                        };
                        e_drag_down = e_drag_move;
                        imgX += e_drag_distance.x;
                        imgY += e_drag_distance.y;
                        context.clearRect(0, 0, canvas.width, canvas.height);
                        context.globalAlpha = 1.0;
                        context.drawImage(img, 0, 0, img.width, img.height, (imgX / 5), (imgY / 5), img.width * imgScale, img.height * imgScale);
                        context.globalAlpha = val;
                        context.drawImage(img1, 0, 0, img1.width, img1.height, (imgX / 5), (imgY / 5), img1.width * imgScale, img1.height * imgScale);
                    });
                    $(item).mouseup(function () {
                        $(item).unbind("mousemove");
                        $(item).unbind('mouseup');
                    })
                }
            })
        })
    }
    
    function inp_methods(inp_id,context,canvas,img,img1){
        var inp_id_arr = inp_id.split(',');
        inp_id_arr.forEach(function(item,i){
            $(item).on('input propertychange',function(){
                val = $(item).val();
                val = ( val < 0.1)? 0.1 : val/100;
                context.clearRect(0,0,canvas.width,canvas.height);
                context.globalAlpha = 1.0;
                context.drawImage(img,0,0,img.width, img.height, (imgX / 5), (imgY / 5), img.width * imgScale, img.height * imgScale);
                context.globalAlpha = val;
                context.drawImage(img1,0,0,img1.width, img1.height, (imgX / 5), (imgY / 5), img1.width * imgScale, img1.height * imgScale);
            })
        });
    }

     有错误的地方,请大家帮忙 指正一下。谢谢!

  • 相关阅读:
    9、Spring Boot 2.x 集成 Thymeleaf
    【专题】Spring Boot 2.x 面试题
    8、Spring Boot 2.x 服务器部署
    7、Spring Boot 2.x 集成 Redis
    6、Spring Boot 2.x 集成 MyBatis
    5、Spring Boot 2.x 启动原理解析
    4、Spring Boot 2.x 自动配置原理
    3、Spring Boot 2.x 核心技术
    2、Spring Boot 2.x 快速入门
    centOS下安装JDK1.8.60,glassfish4.1.1以及MySQL
  • 原文地址:https://www.cnblogs.com/yuerdong/p/9299727.html
Copyright © 2011-2022 走看看