6.前端开发 | 深蓝的blog

使用CSS3跟SVG实现圆圈进度条

Alan 八月 8th, 2018 6.前端开发

Leave a comment

我也是因为业务需要，需要给头像做一个进度条，查看效果图：

实现的代码也是网上搜索的，这里我讲解一下实现的原理：

使用svg画一个圆，然后分成5段，每段的颜色值可以渐变，当然也可以纯色，我是使用了纯色的。

下面来看一下CSS代码：

<style>
    body {
        background-color: #fff
    }

    @-webkit-keyframes load {
        0% {
            stroke-dashoffset: 0;
        }
    }

    @keyframes load {
        0% {
            stroke-dashoffset: 0;
        }
    }

    .progress {
        position: relative;
        display: inline-block;
        padding: 0;
        text-align: center;
    }

    .progress > li {
        display: inline-block;
        position: relative;
        text-align: center;
        color: #93A2AC;
        font-family: Lato;
        font-weight: 100;
        margin: 2rem;
    }

    .progress > li:before {
        content: attr(data-name);
        position: absolute;
        width: 100%;
        bottom: -2rem;
        font-weight: 400;
    }

    .progress > li:after {
        content: attr(data-percent);
        position: absolute;
        width: 100%;
        top: 3.7rem;
        left: 0;
        font-size: 2rem;
        text-align: center;
    }

    .progress svg {
        width: 10rem;
        height: 10rem;
    }

    .progress svg:nth-child(2) {
        position: absolute;
        left: 0;
        top: 0;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    .progress svg:nth-child(2) path {
        fill: none;
        stroke-width: 25;
        stroke-dasharray: 629;
        stroke: #fff;
        opacity: .9;
        -webkit-animation: load 10s;
        animation: load 10s;
    }
</style>

可以之间是10秒，如果喜欢短一点的，可以改一下样式“progress svg:nth-child(2) path”中的10s;

现在来看看html代码：

<ul class="progress">
    <!--  Item  -->
    <li data-name="HTML5 Skill" data-percent="87%">
        <svg viewBox="-10 -10 220 220">
            <g fill="none" stroke-width="2" transform="translate(100,100)">
                <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"></path>
                <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"></path>
                <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"></path>
                <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"></path>
                <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"></path>
                <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"></path>
            </g>
        </svg>
        <svg viewBox="-10 -10 220 220">
            <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z"
                  stroke-dashoffset="547"></path>
        </svg>
    </li>
    <!--  Item  -->
    <li data-name="jQuery Skill" data-percent="65%">
        <svg viewBox="-10 -10 220 220">
            <g fill="none" stroke-width="12" transform="translate(100,100)">
                <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"></path>
                <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"></path>
                <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"></path>
                <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"></path>
                <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"></path>
                <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"></path>
            </g>
        </svg>
        <svg viewBox="-10 -10 220 220">
            <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z"
                  stroke-dashoffset="200"></path>
        </svg>
    </li>
</ul>

其中data-name属性是标题名称，data-percent是中间的进度描述，我自己项目整理的时候把这段的CSS代码过滤了，因为我不需要显示这些，进度的控制是在svg中path元素的stroke-dashoffset属性中：

100%=629，也就是1%=6.29，自己根据进度乘一下。另外需要说一下的就是g元素中的stroke-width属性是控制宽度的。

颜色是在另外一个avg中控制的，可以看到path路径有一个stroke=”url(#cl6)”属性，这个就是控制段的颜色，下面附上代码：

<svg width="0" height="0">
    <defs>
        <lineargradient id="cl1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
            <stop stop-color="#08DA24"></stop>
            <stop offset="100%" stop-color="#08DA24"></stop>
        </lineargradient>
        <lineargradient id="cl2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
            <stop stop-color="#08DA24"></stop>
            <stop offset="100%" stop-color="#08DA24"></stop>
        </lineargradient>
        <lineargradient id="cl3" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
            <stop stop-color="#08DA24"></stop>
            <stop offset="100%" stop-color="#08DA24"></stop>
        </lineargradient>
        <lineargradient id="cl4" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
            <stop stop-color="#08DA24"></stop>
            <stop offset="100%" stop-color="#08DA24"></stop>
        </lineargradient>
        <lineargradient id="cl5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
            <stop stop-color="#08DA24"></stop>
            <stop offset="100%" stop-color="#08DA24"></stop>
        </lineargradient>
        <lineargradient id="cl6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
            <stop stop-color="#08DA24"></stop>
            <stop offset="100%" stop-color="#08DA24"></stop>
        </lineargradient>
    </defs>
</svg>

下面来看看效果图:

下面奉上全部源代码：

<ul class="progress">
    <!--  Item  -->
    <li data-name="HTML5 Skill" data-percent="87%">
        <svg viewBox="-10 -10 220 220">
            <g fill="none" stroke-width="2" transform="translate(100,100)">
                <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"></path>
                <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"></path>
                <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"></path>
                <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"></path>
                <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"></path>
                <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"></path>
            </g>
        </svg>
        <svg viewBox="-10 -10 220 220">
            <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z"
                  stroke-dashoffset="547"></path>
        </svg>
    </li>
    <!--  Item  -->
    <li data-name="jQuery Skill" data-percent="65%">
        <svg viewBox="-10 -10 220 220">
            <g fill="none" stroke-width="12" transform="translate(100,100)">
                <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"></path>
                <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"></path>
                <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"></path>
                <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"></path>
                <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"></path>
                <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"></path>
            </g>
        </svg>
        <svg viewBox="-10 -10 220 220">
            <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z"
                  stroke-dashoffset="200"></path>
        </svg>
    </li>
</ul>

<!--  Defining Angle Gradient Colors  -->
<svg width="0" height="0">
    <defs>
        <lineargradient id="cl1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
            <stop stop-color="#08DA24"></stop>
            <stop offset="100%" stop-color="#08DA24"></stop>
        </lineargradient>
        <lineargradient id="cl2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
            <stop stop-color="#08DA24"></stop>
            <stop offset="100%" stop-color="#08DA24"></stop>
        </lineargradient>
        <lineargradient id="cl3" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
            <stop stop-color="#08DA24"></stop>
            <stop offset="100%" stop-color="#08DA24"></stop>
        </lineargradient>
        <lineargradient id="cl4" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
            <stop stop-color="#08DA24"></stop>
            <stop offset="100%" stop-color="#08DA24"></stop>
        </lineargradient>
        <lineargradient id="cl5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
            <stop stop-color="#08DA24"></stop>
            <stop offset="100%" stop-color="#08DA24"></stop>
        </lineargradient>
        <lineargradient id="cl6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
            <stop stop-color="#08DA24"></stop>
            <stop offset="100%" stop-color="#08DA24"></stop>
        </lineargradient>
    </defs>
</svg>

<style>
    body {
        background-color: #fff
    }

    @-webkit-keyframes load {
        0% {
            stroke-dashoffset: 0;
        }
    }

    @keyframes load {
        0% {
            stroke-dashoffset: 0;
        }
    }

    .progress {
        position: relative;
        display: inline-block;
        padding: 0;
        text-align: center;
    }

    .progress > li {
        display: inline-block;
        position: relative;
        text-align: center;
        color: #93A2AC;
        font-family: Lato;
        font-weight: 100;
        margin: 2rem;
    }

    .progress > li:before {
        content: attr(data-name);
        position: absolute;
        width: 100%;
        bottom: -2rem;
        font-weight: 400;
    }

    .progress > li:after {
        content: attr(data-percent);
        position: absolute;
        width: 100%;
        top: 3.7rem;
        left: 0;
        font-size: 2rem;
        text-align: center;
    }

    .progress svg {
        width: 10rem;
        height: 10rem;
    }

    .progress svg:nth-child(2) {
        position: absolute;
        left: 0;
        top: 0;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    .progress svg:nth-child(2) path {
        fill: none;
        stroke-width: 25;
        stroke-dasharray: 629;
        stroke: #fff;
        opacity: .9;
        -webkit-animation: load 10s;
        animation: load 10s;
    }
</style>

拷贝一下，就可以运行了。

使用 WebSocket 和 SSE 实现 HTTP 服务器推送

Alan 八月 3rd, 2018 6.前端开发

Leave a comment

HTTP 服务器推送也称为 HTTP 流，是一种客户端-服务器通信模式，它将信息从 HTTP 服务器异步发送到客户端，而无需客户端请求。在高度交互的 Web 或移动应用程序中，一个或多个客户端需要连续不断地从服务器接收信息，服务器推送架构对这类应用程序特别有效。在本文中，您将了解 WebSocket 和 SSE（服务器发送的事件），它们是实现 HTTP 服务器推送的两种技术。

我首先将概述两种解决方案之间的技术差异，以及如何在 Web 架构中实现每种解决方案。我将通过一个示例应用程序，向您展示如何设置一个 SSE 实现，然后介绍一个类似的 WebSocket 实现。最后，我将比较两种技术，并提出我关于在不同类型 Web 或移动应用程序中使用它们的结论。

请注意，本文要求熟悉 HTTP 服务器推送的语言和概念。两个应用程序都是在 Python 中使用 CherryPy 编写的。

AngularJS实现slide指令

Alan 七月 19th, 2018 6.前端开发

Leave a comment

前端的HTML代码如下：

<div test-slide="{{imgs}}" data-time="3"></div>

指令testSlide代码：

.directive("testSlide", function ($interval) {
    return {
        restrict: 'A',
        replace: false,
        link: function (scope, ele, attr) {
            scope.imgs = JSON.parse(attr.testSlide);
            var time = parseFloat(attr.time);
            if (scope.imgs.length > 0 && time > 0) {
                if (typeof window.__slide === "object" && window.__slide != null) {
                    $interval.cancel(window.__slide);
                }
                window.__slide = $interval(function () {
                    var n = $(".slide>.active");
                    var c = $(".slide").children();

                    var index = -1;
                    $.each(c, function (i, n) {
                        if (i + 1 === c.length && index === -1) {
                            index = 0;
                        }
                        if ($(n).hasClass('active') === true && index === -1) {
                            index = i+1;
                        }
                    })

                    n.removeClass('active slideInRight');
                    $(c[index]).addClass('active slideInRight');

                    if(typeof c[index] === "undefined"){
                        $interval.cancel(window.__slide);
                    }
                }, time * 1000)
            }
        },
        template: '<div><style>\n' +
        '        .slide{width: 100%;}\n' +
        '        .slide .slide-img{width: 100%;display: none;}\n' +
        '        .slide .active{display: block;}\n' +
        '    </style><div class="slide">' +
        '   <div class="slide-img {{$first?\'active\':\'\'}}" ng-repeat="v in imgs">' +
        '       <img ng-src="{{v}}"/>' +
        '   </div>' +
        '</div></div>'
    }
})

功能实现了，但是可能需要增加一些动画效果，这里就懒得整了。

360全景图three.js与Photo-Sphere-Viewer-master 3D全景浏览开发

Alan 五月 17th, 2018 6.前端开发

Leave a comment

1.支持WebGL和canvas的浏览器 (IE10, IE11支持, 但在IE里移动图片时很卡, 不一定是全部人都有这情况)

2.Three.js (文件较大, 有官网demo, 可不下载, 下载photo-sphere-viewer.js时也有three.js)

下载地址：https://github.com/mrdoob/three.js

3.photo-sphere-viewer.js (这是基于Three.js开发的柱状全景图插件)

下载地址：https://github.com/JeremyHeleine/Photo-Sphere-Viewer

4.360度全景图，是左右能够完美拼接的

参考: 图片尺寸 3600 * 1800 (最佳尺寸) http://www.360pano.eu/show/?id=400

5.引入js

6.js调用

var div = document.getElementById('container');
var PSV = new PhotoSphereViewer({
    // Path to the panorama
    panorama: 'images/0398.jpg',
    // Container
    container: div,
    // Deactivate the animation
    time_anim: false,
    // Display the navigation bar
    navbar: true,      
    // Resize the panorama
    size: {
        width: '800px',
        height: '400px'
    },
    // 限制顶部
    // tilt_up_max: Math.PI / 7,       
    // 限制底部
    // tilt_down_max: Math.PI / 7     
});

7.API选择, 配置参数介绍

panorama：（必选）全景图的路径。
container：（必选）放置全景图的容器。
autoload：（默认为true）true为自动加载全景图，false为迟点加载全景图（通.过load方法）。
usexmpdata：（默认值为true）photo sphere viewer是否必须读入xmp数据，false为不必须。
cors_anonymous：（默认值为true）true为不能通过cookies获得用户
pano_size：（默认值为null）全景图的大小，是否裁切。
default_position：（默认值为0）定义默认位置，用户看见的第一个点，例如：{long: math.pi, lat: math.pi/2}。
min_fov：（默认值为30）观察的最小区域，单位degrees，在1-179之间。
max_fov：（默认值为90）观察的最大区域，单位degrees，在1-179之间。
allow_user_interactions：（默认值为true）设置为false，则禁止用户和全景图交互（导航条不可用）。
allow_scroll_to_zoom：（默认值为true）若设置为false，则用户不能通过鼠标滚动进行缩放图片。
tilt_up_max：（默认值为math.pi/2）向上倾斜的最大角度，单位radians。
tilt_down_max：（默认值为math.pi/2）向下倾斜的最大角度，单位radians。
min_longitude：（默认值为0）能够展示的最小经度。
max_longitude：（默认值为2PI）能够展示的最大维度。
zoome_level：（默认值为0）默认的缩放级别，值在0-100之间。
long_offset：（默认值为PI/360）mouse/touch移动时每像素经过的经度值。
lat_offset：（默认值为pi/180）mouse/touch移动时每像素经过的纬度值。
time_anim（默认值为2000）全景图在time_anim毫秒后会自动进行动画。（设置为false禁用它）
reverse_anim：（默认值为true）当水平方向到达最大/最小的经度时，动画方向是否反转（仅仅是不能看到完整的圆）。
anim_speed：（默认值为2rpm）动画每秒/分钟多少的速度。
vertical_anim_speed：（默认值为2rpm）垂直方向的动画每秒/分钟多少的速度。
vertical_anim_target：（默认值为0）当自动旋转时的维度，默认为赤道。
navbar：（默认为false）显示导航条。
navbar_style：（默认值为false）导航条的样式。有效的属性：
    backgroundColor：导航条背景色（默认值rgba(61, 61, 61, 0.5)）；
    buttonsColor：按钮前景色（默认值 rgba(255, 255, 255, 0.7)）；
    buttonBackgroundColor：按钮激活时的背景色（默认值 rgba(255, 255, 255, 0.1)）；
    buttonsHeight：按钮高度，单位px（默认值 20）；
    autorotateThickness：自动旋转图片的层（默认值 1）；
    zoomRangeWidth：缩放游标的宽度，单位px（默认值 50）；
    zoomRangeThickness：缩放游标的层（默认值 1）；
    zoomRangeDisk：缩放游标的放大率，单位px（默认值 7）；
    fullscreenRatio：全屏图标的比例（默认值 4/3）；
    fullscreenThickneee：全屏图片的层，单位px（默认值 2）
loading_msg：（默认值为Loading...）加载信息。
loading_img：（默认值 为null）loading图片的路径。
loading_html：（默认值 为null）html加载器（添加到容器中的元素或字符串）。
size：（默认值为null）全景图容器的最终尺寸，例如{width: 500, height: 300}。
onready：（默认值为null）全景图准备好并且第一张图片展示出来后的回调函数。
方法介绍
addAction()：添加事件（插件没有提供执行事件的方法，似乎是提供给插件内部使用的）。
fitToContainer()：调整全景图容器大小为指定大小。
getPosition()：获取坐标经纬度。
getPositionInDegrees()：获取经纬度度数。
getZoomLevel()：获取缩放级别。
load()：加载全景图（）。
moveTo(longitude, latitude)：根据经纬度移动到某一点。
rotate(dlong, dlat)：根据经纬度度数移动到某一点。
toggleAutorotate()：是否开启全景图自动旋转。
toggleDeviceOrientation()：是否开启重力感应方向控制。
toggleFullscreen()：是否开启全景图全屏。
toggleStereo()：是否开启立体效果（可用于WebVR哦）。
zoom(level)：设置缩放级别。
zoomIn()：放大。
zoomOut()：缩小。

示例参考：https://threejs.org/examples/#webgl_animation_cloth

angularJs ng-options指令详解

Alan 九月 13th, 2017 6.前端开发

Leave a comment

ng-options一般有以下用法及其详解

数组：

label for value in array
select as label for value in array
label group by group for value in array
label disable when disable for value in array
label group by group for value in array track by trackexpr
label disable when disable for value in array track by trackexpr
label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)

对象：

label for (key , value) in object
select as label for (key ,value) in object
label group by group for (key,value) in object
label disable when disable for (key, value) in object
select as label group by group for(key, value) in object
select as label disable when disable for (key, value) in object

选中：

ng-options的选中方式是根据ng-model而决定的，假如我们的对象是：

[{“value”:0,”name”:”否”},{“value”:1,”name”:”是”}]

那么ng-model对应的就是：

{“value”:0,”name”:”否”} 或者是 {“value”:1,”name”:”是”} 对象。

一个例子：

//The html code.
<select class="form-control" ng-model="selected" ng-options="n.name for (i,n) in defaultContent" ng-change="change(selected)"></select>

//and the js code.

.controller("testController",function($scope){

    /**
     * selected value.
     * @type {string}
     */
    $scope.content = "0";

    /**
     * select options object.
     */
    $scope.defaultContent = JSON.parse('[{"value":0,"name":"否"},{"value":1,"name":"是"}]');

    /**
     * foreach defaultContent and found the selected object.
     */
    for(i in $scope.defaultContent){

        /**
         * if defaultContent[i].value equals content,than the selected object is defaultContent[i].
         */
        if($scope.defaultContent[i].value == parseInt($scope.content)){
            $scope.selected = $scope.defaultContent[i];
            break;
        }
    }
    $scope.change = function(obj){
        log(obj)
    }
})

defaultContent是我们默认的下拉选择框的对象数组。
content是下拉选择框选中value的值
经过遍历数组，找出选中值的对应对象复制给新申明的选中对象selected。
html代码ng-model赋值selected就可以了。

1•2 345 6•9

Page 4 of 9

Archive for the category: 6.前端开发

使用CSS3跟SVG实现圆圈进度条

使用 WebSocket 和 SSE 实现 HTTP 服务器推送

AngularJS实现slide指令

360全景图three.js与Photo-Sphere-Viewer-master 3D全景浏览开发

angularJs ng-options指令详解

近期文章

近期评论

文章归档

分类目录

Latest Posts

功能

友情链接

使用CSS3跟SVG实现圆圈进度条

使用 WebSocket 和 SSE 实现 HTTP 服务器推送

AngularJS实现slide指令

360全景图three.js与Photo-Sphere-Viewer-master 3D全景浏览开发

angularJs ng-options指令详解

标签

近期文章

近期评论

文章归档

分类目录

Latest Posts

功能

友情链接