精华内容
下载资源
问答
  • 有点颓废了,好久不写了。不写东西还是会忘。 最近项目用到了arcigs地图这一块,需要在上面做一个扇形表示区间。 不多说了先看效果图。

    有点颓废了,好久不写了。不写东西还是会忘。

    最近项目用到了arcigs地图这一块,需要在上面做一个扇形表示区间。

    不多说了先看效果图。




    看起来还不错吧啊,

    画扇形需要半径和角度,下面的是我找的一个算法

    function getPoints(center, radius, c, endAngle,
    						pointNum) {
    			var sin;
    			var cos;
    			var x;
    			var y;
    			var angle;
    
    			var points = new Array();
    			points.push(center);
    			for ( var i = 0; i <= pointNum; i++) {
    				angle = startAngle + (endAngle - startAngle) * i
    						/ pointNum;
    				sin = Math.sin(angle * Math.PI / 180);
    				cos = Math.cos(angle * Math.PI / 180);
    				x = center[0] + radius * sin;
    				y = center[1] + radius * cos;
    				points[i] = [ x, y ];
    			}
    
    			var point = points;
    			point.push(center);
    			return point;
    		}

    有几个参数,第一个是中心点,第二第三是开始角度和结束角度(正北为0度),最后一个为弧面上点的个数

    接下来就是填充颜色了

    function drawPoint() {
    			 var clon = 116.570132;
    			 var clat = 24.80105;
    			 var apoint1 = getPoints([clon, clat], 2, -30, 45, 60);
    			 apoint1[apoint1.length] = apoint1[0];
    				 
    			 var s111 = new esri.symbol.SimpleFillSymbol(
    						esri.symbol.SimpleFillSymbol.STYLE_SOLID, 
    						new esri.symbol.SimpleLineSymbol(
    							esri.symbol.SimpleLineSymbol.STYLE_NULL, 
    							new dojo.Color([255,0,0]),
    							2
    						),
    						new dojo.Color([255,255,0,0.5])
    				);
    			 var otherInfo = new esri.InfoTemplate("地理位置:${name}","经度:${lon}</br>纬度:${lat}");
    			 var polygon2 = new esri.geometry.Polygon(apoint1);
    			 var gr3 = new esri.Graphic(polygon2, s111, {"lon": 12,"lat": 444,"name": 5555}, otherInfo);
    			 var g1 = new GraphicsLayer();
    			 g1.add(gr3);
    			 linemap.addLayer(g1);
    		}

    这个就是我随便测试的一个扇形,填充颜色主要使用SimpleFillSymbol这个类




    展开全文
  • 扇形导航 * { margin: 0 ; padding: 0 ; } html,body{ height: 100% ; overflow: hidden; } #main{ overflow: auto; height: 100% ; position: relative; } h1{ color: #1c86e5; text - ...

    第一次发博客,有点紧张。首先来一张效果图。

           

    主要是实现了点击右下角的风扇按钮实现了:

    导航栏的开启与关闭,中间伴随着 transition过渡以及transform的2D动画。

    上源码:

    <!DOCTYPE html>
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
        <title>扇形导航</title>
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
            overflow: hidden;
        }
        #main{
            overflow: auto;
            height: 100%;
            position: relative;
        
        }
        h1{
            color: #1c86e5;
            text-align: center;
        }
        .navigation{
            position: fixed;
            right:5px ;
            bottom: 5px;
            height: 40px;
            width: 40px;
        }
        .right-bottom{
            height: 40px;
            width: 40px;
            position: absolute;
            border-radius: 50%;
            z-index: 1;
            transition: 1.5s;
            background-color: white;
        }
    
        img{
            position: absolute;
            transition: 1s;
        }
    </style>
    <body>
        <div id="main">
            <h1>扇形导航</h1>
            <div class="navigation">
                <img src="img/衣服.png" width="40">
                <img src="img/礼物.png" width="40">
                <img src="img/设置.png" width="40">
                <img src="img/返回.png" width="40">
                <img class="right-bottom"  src="img/风扇.png" width="40">
    <!--            <div class="right-bottom">-->
    <!--            </div>-->
            </div>
        </div>
    <script>
        // 1.在元素首次渲染还没有完成的情况下,是不会触发过渡的
        // 2.在绝大部分变换样式切换时,如果变化函数的位置个数、类型不相同也可能不会触发过渡
        window.οnlοad=function () {
            let imgArr=document.getElementsByTagName('img')
            let flag=true
            for (let i=0;i<imgArr.length;i++){
                imgArr[i].onmousedown=function () {
                    switch (i) {
                        case 0:imgArr[i].style.transform='translate(0,-90px) rotate(360deg)scale(1.5)'
                            imgArr[i].style.opacity=0.3;
                            imgArr[i].style.transition='300ms';break;
                        case 1:imgArr[i].style.transform='translate(-45px,-85px) rotate(360deg)scale(1.5)'
                            imgArr[i].style.opacity=0.3;
                            imgArr[i].style.transition='300ms';break;
                        case 2:imgArr[i].style.transform='translate(-90px,-50px) rotate(360deg)scale(1.5)'
                            imgArr[i].style.opacity=0.3;
                            imgArr[i].style.transition='300ms';break;
                        case 3:imgArr[i].style.transform='translate(-100px,0) rotate(360deg)scale(1.5)'
                            imgArr[i].style.opacity=0.3;
                            imgArr[i].style.transition='300ms';break;
    
                    }
    
                }
    
                imgArr[i].onmouseup=function () {
                    switch (i) {
                        case 0:setTimeout(function () {
                            imgArr[i].style.transform='translate(0,-90px) rotate(360deg)scale(1)'
                            imgArr[i].style.opacity=1;
                        },300);break;
                        case 1:setTimeout(function () {
                            imgArr[i].style.transform='translate(-45px,-85px) rotate(360deg)scale(1)'
                            imgArr[i].style.opacity=1;
                        },300);break;
                        case 2:setTimeout(function () {
                            imgArr[i].style.transform='translate(-90px,-50px) rotate(360deg)scale(1)'
                            imgArr[i].style.opacity=1;
                        },300);break;
                        case 3:setTimeout(function () {
                            imgArr[i].style.transform='translate(-100px,0) rotate(360deg)scale(1)'
                            imgArr[i].style.opacity=1;
                        },300);break;
    
    
                    }
                    setTimeout(function () {
                        imgArr[i].style.transition='1s'
                    },400)
                }
    
            }
            imgArr[4].οnclick=()=>{
                if (flag){
                    for (let i=0;i<imgArr.length-1;i++){
                        // debugger
                        imgArr[i].style.transition='1s '+(i*0.12)+'s'
                    }
                    imgArr[4].style.transform='rotate(360deg)';
                    imgArr[0].style.transform='translate(0,-90px) rotate(360deg)'
                    imgArr[1].style.transform='translate(-45px,-80px) rotate(360deg)'
                    imgArr[2].style.transform='translate(-90px,-50px) rotate(360deg)'
                    imgArr[3].style.transform='translate(-100px,0) rotate(360deg)'
                } else {
                    for (let i=0;i<imgArr.length-1;i++){
                        imgArr[i].style.transition='1s '+((imgArr.length-i-1)*0.12)+'s'
                    }
                    imgArr[4].style.transform='rotate(0deg)';
                    imgArr[0].style.transform='translate(0,0) rotate(0deg)'
                    imgArr[1].style.transform='translate(0,0) rotate(0deg)'
                    imgArr[2].style.transform='translate(0,0) rotate(0deg)'
                    imgArr[3].style.transform='translate(0,0) rotate(0deg)'
                }
                flag=!flag;
            }
    
        }
    </script>
    </body>
    </html>

     

    主要的坑有:
     1.在元素首次渲染还没有完成的情况下,是不会触发过渡的
    2.在绝大部分变换样式切换时,如果变化函数的位置个数类型不相同也可能不会触发过渡
    3.感觉内存中变化的太快浏览器可能来不及渲染所以采用定时器,等待浏览器渲染

    总结:
      实现方法有很多,我这边只是一个特别笨拙的方式。
      还可以通过通过修改left,top的值来实现。这样可以利用三角函数,定义函数会优雅一些。
      图片来自阿里矢量图标库。

    转载于:https://www.cnblogs.com/hsBK/p/10886075.html

    展开全文
  • * 画扇形,实际返回一个多边形。最后要通过全局的地图组件 map的addOverlay方法添加。(部分参数可缺省) * 终止角度缺省,则在起始角度上+60 * @param {Object} lng 经度 * @param {Object} lat 纬度 * @param...

    项目中有需要在百度地图上根据坐标和角度画扇形图的需求,因为离线地图API暂时没有此方法和功能,所以就在离线地图的基础上,加入了此方法,代码拥有较为详细的注释:

    /*
     * 离线地图扩展功能函数
     *
     * 拓展功能基于 map.js 。
     */
    
    /**
     * 画扇形,实际返回一个多边形。最后要通过全局的地图组件 map的addOverlay方法添加。(部分参数可缺省)
     * 终止角度缺省,则在起始角度上+60
     * @param {Object} lng 经度
     * @param {Object} lat 纬度
     * @param {Object} sDegree 起始角度(方向:正东到正北)
     *
     */
    function drawSectorOmit(lng, lat, sDegree) {
        var radius = 100; //单位米
       //对传入的角度从减去90度,由从正东起始,转为正北起始
        sDegree = sDegree - 90;
        eDegree = sDegree + 60;
        var color = "blue";
        return drawSector(lng, lat, radius, sDegree, eDegree, color);
    }
    
    /**
     * 画扇形,实际返回一个多边形。最后要通过全局的地图组件 map的addOverlay方法添加
     * @param {Object} lng 经度
     * @param {Object} lat 纬度
     * @param {Object} radius 半径
     * @param {Object} sDegree 起始角度(方向:正东到正北)
     * @param {Object} eDegree 终止角度
     * @param {Object} color 颜色
     *
     */
    function drawSector(lng, lat, radius, sDegree, eDegree, color) {
        if (eDegree < sDegree) {
            console.log("drawSector() ----> 终止角度应大于起始角度");
            return "-1";
        }
    
        var point = new BMap.Point(lng, lat);
    
        var strokeColor = color; //边线颜色
        var strokeWeight = 1; //边线宽度
        var strokeOpacity = 0.8; //边线透明度,取值范围0 - 1。
        var strokeStyle = 'solid'; //边线的样式,solid或dashed。
        var fillColour = color; //填充颜色
        var fillOpacity = 0.4; //填充透明度
    
    
        var points = []; //创建构成多边形的点数组
        var step = ((eDegree - sDegree) / 1000) || 1000; //根据扇形的总夹角确定每步夹角度数,最大为1000
    
        points.push(point); //设置第一点(原点)
    
        //根据步长计算,循环获取每步的圆弧上点的坐标,存入点数组
        for (var i = sDegree; i < eDegree + 0.001; i += step) {
            points.push(EOffsetBearing(point, radius, i));
        }
    
        points.push(point); //设置最后一点(原点)
    
        //根据构成的点数组以及其他参数画多边形
        var polygon = new BMap.Polygon(
            points, {
                strokeColor: strokeColor,
                strokeWeight: strokeWeight,
                strokeOpacity: strokeOpacity,
                strokeStyle: strokeStyle,
                fillColor: fillColour,
                fillOpacity: fillOpacity
            });
    
        return polygon;
    }
    
    //使用数学的方法计算需要画扇形的圆弧上的点坐标
    //point:原点; dist:半径距离; angle:角度 (方向:纬度差为180时,逆时针;纬度差为-180时,顺时针 )
    function EOffsetBearing(point, dist, angle) {
        var lngConv = map.getDistance(point, new BMap.Point(point.lng + 0.1, point.lat)) * 10; //计算1经度与原点的距离
        var latConv = map.getDistance(point, new BMap.Point(point.lng, point.lat + 0.1)) * 10; //计算1纬度与原点的距离
        var lat = dist * Math.sin(angle * Math.PI / 180) / latConv; //正弦计算待获取的点的纬度与原点纬度差
        var lng = dist * Math.cos(angle * Math.PI / 180) / lngConv; //余弦计算待获取的点的经度与原点经度差
        return new BMap.Point(point.lng + lng, point.lat + lat);
    }
    
    
    展开全文
  • CSS3动画-扇形展开-(内有js代码)

    千次阅读 2017-10-15 00:10:27
    本文记录的是使用css新属性制作的扇形展开效果。其功能有:1.当页面加载完成之后,所有的卡片会像扇子一样展开;2.当点击封面,也就是最右边的卡片时,扇子会进行展示或折叠;3.除封面外的任意一张卡片,该卡片会...

           本文记录的是使用css新属性制作的扇形展开效果。其功能有:1.当页面加载完成之后,所有的卡片会像扇子一样展开;2.当点击封面,也就是最右边的卡片时,扇子会收起来;3.除封面外的任意一张卡片,该卡片会旋转到中间(整个扇子都旋转),并且卡片上的文字会展示出来。
           最终实现效果如下所示:
    扇形展开示意图
           html结构如下图:

    <ul class="container">
                <li>
                    <h4>云服务</h4>
                </li>
    
                .....//多个li
                <li>
                    <h4>点击展开/折叠</h4>
                </li>
            </ul>

           在CSS部分,主要使用了雪碧图,动画,阴影,背景渐变等CSS属性,运行代码需要标准化浏览器的支持。
           对整体的css设置如下:

    .container {
        position: relative;
        margin: 30px auto;
        width: 130px;
        text-align: center;
        height: 500px;
    }

           设置整体为相对定位,作为每张卡片定位的父级。每张卡片的通用设置为:

        position: absolute;
        left: 0;
        top: 0;
        width: 130px;
        height: 500px;
        -webkit-transform-origin: 25% 90%;//旋转基点设置
        -moz-transform-origin: 25% 90%;
        -ms-transform-origin: 25% 90%;
        transform-origin: 25% 90%;
        -webkit-transition: -webkit-transform .5s ease;
        -moz-transition: -moz-transform .5s ease;
        transition: transform .5s ease;
    }

    给每个卡片增加不同的颜色和阴影,如下:

    .container li:nth-of-type(1) {
        background-color: #9b5512;
        box-shadow: -1px -1px 3px rgba(0, 0, 0, .5), 1px 1px 1px rgba(0, 0, 0, .5), inset 0 3px 0 rgba(255, 255, 255, .5);
    }
    
    .container li:nth-of-type(2) {
        background-color: #ff4001;
        box-shadow: -1px -1px 3px rgba(0, 0, 0, .5), 2px 2px 1px rgba(0, 0, 0, .5), inset 0 3px 0 rgba(255, 255, 255, .5);
    }
    .....
    .container li:nth-of-type(9) {
        background-color: #7f00ff;
        box-shadow: -1px -1px 3px rgba(0, 0, 0, .5), 8px 8px 1px rgba(0, 0, 0, .5), inset 0 3px 0 rgba(255, 255, 255, .5);
    }
    //封面单独设置背景渐变
    .container li:nth-of-type(10) {
        background: -webkit-linear-gradient(-45deg, #dddddd 0%, #58535e 48%, #889396 100%);
        background: -moz-linear-gradient(-45deg, #dddddd 0%, #58535e 48%, #889396 100%);
        background: -ms-linear-gradient(-45deg, #dddddd 0%, #58535e 48%, #889396 100%);
        background: linear-gradient(-45deg, #dddddd 0%, #58535e 48%, #889396 100%);
    }

           给每张卡片增加before伪类,用来添加雪碧图标,先是通用设置:

    .container li:before {
        background: url(img/sprite.png) no-repeat;
        position: absolute;
        content: "";
        top: 50px;
    }

           分开设置:

    .container li:nth-of-type(1):before {
        left: 42px;
        background-position: -48px -81px;
        width: 46px;
        height: 37px;
    }
    
    .container li:nth-of-type(2):before {
        left: 50px;
        background-position: -248px -132px;
        width: 31px;
        height: 40px;
        }
        .....
        .container li:nth-of-type(9):before {
        left: 42px;
        background-position: -50px -127px;
        width: 46px;
        height: 34px;
    }

           给封面增加after伪类,使用border-radius画出装订按钮。代码如下:

    .container li:last-of-type:after {
        content: "";
        width: 30px;
        height: 30px;
        border-radius: 50%;
        position: absolute;
        left: 15px;
        bottom: 50px;
        background-color: #fff;
        box-shadow: 0 0 5px rgba(0, 0, 0, .8), inset 0 0 3px rgba(0, 0, 0, .3);
    }

           由于动画由CSS3的transform属性来完成,所以js只需要负责改变旋转角度即可。js代码如下所示:

    (function() {
        var container = document.querySelector(".container");
        var card = document.querySelectorAll("li");
        var n = card.length;
        var perDeg = 180 / n;
        var isOpen = true;//记录扇形是否展开
        for(var i = 0; i < n; i++) {
            tdeg = i <= n / 2 ? -(n / 2 - i) * perDeg : (i - n / 2) * perDeg;
            card[i].style.webkitTransform = "rotate(" + tdeg + "deg)";
            card[i].style.msTransform = "rotate(" + tdeg + "deg)";
            card[i].style.MozTransform = "rotate(" + tdeg + "deg)";
            card[i].style.transform = "rotate(" + tdeg + "deg)";
    
        }
        //点击封面来控制扇形的展开与折叠
        card[n - 1].onclick = function() {
            for(var i = 0; i < n; i++) {
                var tdeg = isOpen ? 0 : i <= n / 2 ? -(n / 2 - i) * perDeg : (i - n / 2) * perDeg;
                card[i].style.webkitTransform = "rotate(" + tdeg + "deg)";
                card[i].style.msTransform = "rotate(" + tdeg + "deg)";
                card[i].style.MozTransform = "rotate(" + tdeg + "deg)";
                card[i].style.transform = "rotate(" + tdeg + "deg)";
            }
            isOpen = !isOpen;
        }
        //点击除封面外的卡片,卡片会显示在中间
        for(var i = 0; i < n - 1; i++) {
            card[i].index = i;
            card[i].onclick = function() {
                var tdeg;
                for(var i = 0; i <= this.index; i++) {
                    tdeg = (i-this.index) * perDeg;
                    card[i].style.webkitTransform = "rotate(" + tdeg + "deg)";
                    card[i].style.msTransform = "rotate(" + tdeg + "deg)";
                    card[i].style.MozTransform = "rotate(" + tdeg + "deg)";
                    card[i].style.transform = "rotate(" + tdeg + "deg)";
                }
                for(var i = this.index + 1; i < n; i++) {
                    tdeg = (i - this.index) * perDeg + 5;//展示图片右侧多加度数,以便更好展示卡片文字
                    card[i].style.webkitTransform = "rotate(" + tdeg + "deg)";
                    card[i].style.msTransform = "rotate(" + tdeg + "deg)";
                    card[i].style.MozTransform = "rotate(" + tdeg + "deg)";
                    card[i].style.transform = "rotate(" + tdeg + "deg)";
                }
            }
        }
    
    })();
    展开全文
  • 一个html版本的js控制的vml的扇形示例请大家参考
  • 用p5.js画一幅自画像 如何画基础图形 扇形:arc(200, 130, 112, 80, PI, 0);//绘制弧(x,y,宽,高,起始角度,终止角度) 圆形:ellipse(175,150,30,30);//绘制椭圆(x,y,宽,高) 四边形:quad(100,0,200,0,0,200,0,100); ...
  • 如上图所示,根据红、黄、粉不同的数字绘制比例不同的扇形图。canvas画图的基础知识请大家自行百度,就不做解释了。 一、vue+js版本 1、首先写个canvas标签,定义id为canvas; 2、引入vue.js 3、写canvas画图的...
  • ArcGIS 4.11学习笔记之绘制扇形区域

    千次阅读 2019-09-04 15:02:13
    最近都在思考如何做一个扇形形状的图形。毕竟这个图形官方没有直接绘制的API,而且...参考此文章:arcgis for js画扇形并给它填充不同的颜色后而实现。 function getPoints(center, radius, startAngle, endAngle,...
  • 妙味css3课程---4-5、纯js如何做扇形导航 一、总结 一句话总结: 1、aImg[i].style.transition="0.5s "+i*100+"ms";是什么意思? 前一个0.5s是动画持续时间,后一个事件是延迟事件 2、如果页面第一次的动画...
  • 饼图是将一个圆分割为多个扇形。 样例:http://www.zhaojz.com.cn/demo/draw8.html 依赖:【扇形】 //饼图 //dot 圆点 //r 半径 //data 数据(一维数组) function drawPie(dot, r, data){ if(data &...
  • //把背景元素先出来 function drawing(){ var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //黑夜扇形 ctx.beginPath(); //这个开始和结束可以让这个圆独立起来 ctx....
  • 绘图前先看一下要绘制的内容,在扇形图中,我们需要每个块占用的百分比,然后计算角度,对应出弧和分隔线,而对于条形图,我们需要知道每个内容对应的数据量,还需要出坐标轴。除此之外,两个图都需要的是用不同...
  • 王者荣耀里,有大量的扇形攻击范围。 还有六边形的攻击范围,等等各式各样。 一、鼠标点击两下,一个矩形 代码如下:用一个整数数组存放左上角、右下角的坐标[x1,y1,x2,y2],四个整数。 &lt;script ...
  • JS实现画图

    2013-09-10 17:16:24
    JS实现原型 折现 直线 扇形 曲线等图像。
  • 斐波那契螺旋线也称“黄金螺旋”,是根据斐波那契数列出来的螺旋曲线,以斐波那契数为边的正方形中一个90度的扇形,连起来的弧线就是斐波那契螺旋。 草图 过程分解 一、定义一个空的斐波那契数组: var ...
  • 尝试自己使用canvas和css3的rotate旋转div,两种方法都是计算旋转角度的时候很麻烦,因为可能5个字10个字,但是得均匀地呈拱形分布,要知道让每个文字都沿着弯曲路径排布相当的复杂,于是便发现了这个好用的插件—...
  • 介绍了如何使用该jsGraphics.js库绘制图表(条形图,k曲线图,扇形图,饼形图,填充图),您可以用AJAX在后台获取数据,生成不断更新流畅的动态图表。你可以自由的复制传播修改该库,但不能用于任何商业目的。使用时...
  • 扇形的文字 有时候产品大佬就是很任性,说做一个宣传页,一个类似拱门的效果,每次文字不一样,但是文字得呈现拱形状,类似上图啦。 尝试自己使用canvas和css3的rotate旋转div,两种方法都是计算旋转角度的时候很...
  • 作图规则是在以斐波那契数为边的正方形拼成的长方形中一个90度的扇形,连起来的弧线就是斐波那契螺旋线。在这次的作业中,我将用手绘和编程作图两种方式创作斐波那契螺旋线,并试图使之拥有“动态”的效果,还会再...
  • Echarts 百度画图插件

    千次阅读 2018-01-20 10:01:31
    Echarts 是百度的一个js画图插件,非常好用,可以画扇形图、条形图、折线图、散点图、地图等,简单好用,画的图非常漂亮,官方有各种模板和入门教程 html代码 添加一个div标签就行了,echarts生成的图片大小是根据...

空空如也

空空如也

1 2
收藏数 40
精华内容 16
关键字:

js画扇形