v1.0.0

RUN_PROJECT.md

@@ -0,0 +1,4 @@
+
+# 运行项目，在本地跑官网，即可本地查看文档等操作
+1. 运行 `npm start` 命令
+1. 在浏览器输入 `http://localhost:18080/` 访问网站

app.js

@@ -1,6 +1,6 @@
 var express = require('express');
 var path = require('path');
-var favicon = require('serve-favicon');
+//var favicon = require('serve-favicon');
 var logger = require('morgan');
 var cookieParser = require('cookie-parser');
 var bodyParser = require('body-parser');

pjs-dev/pjs/particleground.all.js

@@ -47,6 +47,8 @@
     var floor = Math.floor;
     var isArray = Array.isArray;
     var canvasSupport = !!doc.createElement('canvas').getContext;
+    var defaultCanvasWidth = 485;
+    var defaultCanvasHeight = 300;
     var regTrimAll = /\s/g;
 
 	function pInt( str ){
@@ -183,6 +185,10 @@
         elem.removeEventListener( evtName, handler );
     }
 
+    function setCanvasWH( context ){
+        context.cw = context.c.width = getCss( context.container, 'width' ) || defaultCanvasWidth;
+        context.ch = context.c.height = getCss( context.container, 'height' ) || defaultCanvasHeight;
+    }
     /**
      * 插件公共属性继承
      * @param context {this} 实例对象的上下文环境
@@ -197,11 +203,11 @@
 
             context.set = extend( true, {}, Particleground.commonConfig, constructor.defaultConfig, options );
             context.c = doc.createElement( 'canvas' );
-            context.cw = context.c.width = getCss( context.container, 'width' );
-            context.ch = context.c.height = getCss( context.container, 'height' );
             context.cxt = context.c.getContext( '2d' );
             context.paused = false;
 
+            setCanvasWH( context );
+
             context.container.innerHTML = '';
             context.container.appendChild( context.c );
             context.color = setColor( context.set.color );
@@ -262,9 +268,8 @@
                 var oldCW = context.cw;
                 var oldCH = context.ch;
 
-                // 重新回去容器宽高
-                context.cw = context.c.width = getCss( context.container, 'width' );
-                context.ch = context.c.height = getCss( context.container, 'height' );
+                // 重新设置canvas宽高
+                setCanvasWH( context );
 
                 // 计算比例
                 var scaleX = context.cw / oldCW;

pjs-dev/pjs/particleground.js

@@ -47,6 +47,8 @@
     var floor = Math.floor;
     var isArray = Array.isArray;
     var canvasSupport = !!doc.createElement('canvas').getContext;
+    var defaultCanvasWidth = 485;
+    var defaultCanvasHeight = 300;
     var regTrimAll = /\s/g;
 
 	function pInt( str ){
@@ -183,6 +185,10 @@
         elem.removeEventListener( evtName, handler );
     }
 
+    function setCanvasWH( context ){
+        context.cw = context.c.width = getCss( context.container, 'width' ) || defaultCanvasWidth;
+        context.ch = context.c.height = getCss( context.container, 'height' ) || defaultCanvasHeight;
+    }
     /**
      * 插件公共属性继承
      * @param context {this} 实例对象的上下文环境
@@ -197,11 +203,11 @@
 
             context.set = extend( true, {}, Particleground.commonConfig, constructor.defaultConfig, options );
             context.c = doc.createElement( 'canvas' );
-            context.cw = context.c.width = getCss( context.container, 'width' );
-            context.ch = context.c.height = getCss( context.container, 'height' );
             context.cxt = context.c.getContext( '2d' );
             context.paused = false;
 
+            setCanvasWH( context );
+
             context.container.innerHTML = '';
             context.container.appendChild( context.c );
             context.color = setColor( context.set.color );
@@ -262,9 +268,8 @@
                 var oldCW = context.cw;
                 var oldCH = context.ch;
 
-                // 重新回去容器宽高
-                context.cw = context.c.width = getCss( context.container, 'width' );
-                context.ch = context.c.height = getCss( context.container, 'height' );
+                // 重新设置canvas宽高
+                setCanvasWH( context );
 
                 // 计算比例
                 var scaleX = context.cw / oldCW;

public/src/sass/pc.scss

@@ -56,6 +56,19 @@ code {
     }
 }
 
+.margin-top-10{
+    margin-top: rem(10) !important;
+}
+.margin-bottom-10{
+    margin-bottom: rem(10) !important;
+}
+.margin-top-15{
+    margin-top: rem(15) !important;
+}
+.margin-bottom-15{
+    margin-bottom: rem(15) !important;
+}
+
 // syntax highlight
 pre {
     margin: 0;
@@ -534,6 +547,13 @@ $page-left-right: rem(120);
                 width: rem(280);
                 height: rem(280) !important;
                 border-radius: 50%;
+                >.demo{
+                    border-radius: 50%;
+                    overflow: hidden;
+                    canvas{
+                        border-radius: 50%;
+                    }
+                }
                 >.instance-loading-process{
                     width: 100%;
                     font-size: rem(26);
@@ -549,9 +569,6 @@ $page-left-right: rem(120);
                     }
                 }
             }
-            canvas{
-                border-radius: 50%;
-            }
         }
     }
 }

views/examples/quick-getting.html

@@ -224,7 +224,7 @@ <h5 class="caption">
                 </blockquote>
                 <pre class="common-config normal-text"></pre>
 
-                <div>
+                <div class="margin-top-10">
                     <h6>小提示：</h6>
                     <ul class="mini-text">
                         <li>修改默认配置应放在 <code>new</code> 之前。</li>

views/examples/wave.html

@@ -118,7 +118,7 @@ <h5 class="caption">
         offsetTop = -10;
     }
 
-    // 通过 setOffsetTop() 方法不断地更改offsetTop属性，达到loading的效果
+    // 通过 setOffsetTop() 方法不断地更改offsetTop属性值，达到loading的效果
     effect.setOffsetTop( offsetTop );
 }, 30 );
 
@@ -214,6 +214,36 @@ <h5 class="caption"><a id="参数" href="#参数">API参数配置</a></h5>
                 </table>
             </div>
         </div>
+
+        <div class="module module-api">
+            <h5 class="caption"><a id="方法" href="#方法">方法</a></h5>
+            <div class="content">
+                <ul class="margin-bottom-15">
+                    <li>
+                        <code class="normal-text">.setOffsetTop( offsetTopVal )</code>
+                    </li>
+                    <li>
+                        更改 offsetTop 属性值。
+                    </li>
+                </ul>
+                <table class="table table-bordered-inner table-striped">
+                    <thead>
+                    <tr>
+                        <th width="200">参数名</th>
+                        <th width="200">类型</th>
+                        <th width="600">描述</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>offsetTopVal</td>
+                            <td>number</td>
+                            <td>(0, 1)表示容器高度的倍数，[1, +∞)表示具体数值</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
     </div>
 {% endblock %}