音量调节器 html5 js

最新推荐文章于 2021-06-28 21:09:51 发布

weixin_34217773

最新推荐文章于 2021-06-28 21:09:51 发布

阅读量537

点赞数

文章标签：前端 javascript ViewUI

原文链接：https://my.oschina.net/devGuo/blog/17033

版权

为什么80%的码农都做不了架构师？>>>

// JavaScript Document
function circular (){};
    circular.prototype={
    bigbigCanvas:"",
    centerCanvas:"",
    ballCanvas:"",
    bigArcPointRad:0,
    centerArcPointRad:0,
    ballArcPointRad:0,
    parent:0,
    initParent:function(parents){
        this.parent = $("#"+parents)[0];
    },
    initObj:function(){

        this.bigCanvas = document.createElement("CANVAS");
        $(this.bigCanvas).attr("style","position:absolute;");
        this.centerCanvas =$(this.bigCanvas).clone()[0];
        this.ballCanvas = $(this.bigCanvas).clone()[0];

        $(this.parent).append(this.bigCanvas);
        $(this.parent).append(this.centerCanvas);
        $(this.parent).append(this.ballCanvas);
    },
    initRad:function(a,b,c){
        this.bigArcPointRad= a;
        this.centerArcPointRad = b;
        this.ballArcPointRad = c;
    },

    drawCircular:function(callBack){
        this.postion(callBack);
        if (this.bigCanvas.getContext){
            var bigCtx = this.bigCanvas.getContext('2d');
            bigCtx.fillStyle = '#009';
            // bigCtx.strokeStyle = '#f00';
            bigCtx.beginPath();
            bigCtx.arc(this.bigArcPointRad+1,this.bigArcPointRad+1,this.bigArcPointRad,0,Math.PI*2, true); // 绘制一条圆弧线
            bigCtx.closePath();    // 自动绘制一条直线来关闭弧线。若不调用此方法，将仅仅显示一条圆弧
            bigCtx.fill();      // 可以尝试注释掉 fill 或者 stroke 函数，观察图形的变化
            bigCtx.stroke();
            //===============================================================心圆
            var centerCtx = this.centerCanvas.getContext('2d');
            centerCtx.fillStyle = '#000';
            // centerCtx.strokeStyle = '#f00';
            centerCtx.beginPath();
            centerCtx.arc(this.centerArcPointRad+1,this.centerArcPointRad+1,this.centerArcPointRad,0,Math.PI*2, true); // 绘制一条圆弧线
            centerCtx.closePath();    // 自动绘制一条直线来关闭弧线。若不调用此方法，将仅仅显示一条圆弧
            centerCtx.fill();      // 可以尝试注释掉 fill 或者 stroke 函数，观察图形的变化
            centerCtx.stroke();
            //================================================================滚轴
            var ballCtx = this.ballCanvas.getContext('2d');
            ballCtx.fillStyle = '#090';
            // ballCtx.strokeStyle = '#f00';
            ballCtx.beginPath();
            ballCtx.arc(this.ballArcPointRad+1,this.ballArcPointRad+1,this.ballArcPointRad,0,Math.PI*2, true); // 绘制一条圆弧线
            ballCtx.closePath();    // 自动绘制一条直线来关闭弧线。若不调用此方法，将仅仅显示一条半圆弧
            ballCtx.fill();      // 可以尝试注释掉 fill 或者 stroke 函数，观察图形的变化
            ballCtx.stroke();

        }
    },
    postion:function(callBack){
        $(this.bigCanvas).attr("width",this.bigArcPointRad*2+2);
        $(this.bigCanvas).attr("height",this.bigArcPointRad*2+2);
        $(this.centerCanvas).attr("width",this.centerArcPointRad*2+2);
        $(this.centerCanvas).attr("height",this.centerArcPointRad*2+2);
        var centerArcPointX = this.bigArcPointRad-this.centerArcPointRad;
        var centerArcPointY = this.bigArcPointRad-this.centerArcPointRad;
        this.centerCanvas.style.top=centerArcPointY+"px";
        this.centerCanvas.style.left=centerArcPointX+"px";
        $(this.ballCanvas).attr("width",this.ballArcPointRad*2+2);
        $(this.ballCanvas).attr("height",this.ballArcPointRad*2+2);
        var ballArcPointX = this.bigArcPointRad+this.centerArcPointRad;
        var ballArcPointY = this.bigArcPointRad-this.ballArcPointRad;
        this.ballCanvas.style.top=ballArcPointY+"px";
        this.ballCanvas.style.left=ballArcPointX+"px";


        var ballArcPointXY = this.centerArcPointRad+this.ballArcPointRad;
        var balls = this.ballCanvas;
        var bigArcRad = this.bigArcPointRad;
        var ballArcRad = this.ballArcPointRad;

        var srcX = balls.style.left.split("px")[0] - bigArcRad+this.ballArcPointRad;
        var    srcaixsY = Math.acos(srcX/ballArcPointXY);


        this.ballCanvas.ontouchmove=function(e){
                var nowX = e.touches[0].pageX;
                 var nowY = e.touches[0].pageY;
                nowX = nowX-balls.parentNode.offsetLeft - bigArcRad;
                nowY = nowY-balls.parentNode.offsetTop - bigArcRad;
                var nowR=Math.sqrt(nowY*nowY+nowX*nowX);
                        aixsX = Math.asin(nowY/nowR);
                        aixsY = Math.acos(nowX/nowR);
                        if(Math.abs(srcaixsY-aixsY)<0.5&&srcaixsY-aixsY!=0){

                            var maxs = Math.PI/2;
                            if(aixsX>0&&aixsX<maxs&&aixsY>0&&aixsY<maxs){
                                srcaixsY<0.5?(aixsX=aixsY=0):(aixsX=aixsY=maxs);
                            }
                            var info={y:aixsY,x:aixsX};
                                nowY = ballArcPointXY*Math.sin(aixsX);
                                nowX = ballArcPointXY*Math.cos(aixsY);
                                balls.style.left = nowX + bigArcRad-ballArcRad + "px";
                                balls.style.top = nowY + bigArcRad -ballArcRad + "px";
                                callBack(info);
                                srcaixsY = aixsY;
                        }
                e.preventDefault();
        }

    }
};

转载于:https://my.oschina.net/devGuo/blog/17033