Merge branch 'master' of https://github.com/ciaochaos/qrbtf

src/components/Footer.js

@@ -8,7 +8,7 @@ class Footer extends React.Component {
         return (
             <div className="Qr-titled">
                 <div className="Qr-Centered Qr-footer note-font">
-                    <div><strong>作者</strong>&emsp;<a href="https://blog.ciaochaos.com/" rel="noopener noreferrer" target="_blank">ciaochaos</a>&emsp;<a href="https://github.com/CPunisher/" rel="noopener noreferrer" target="_blank">CPunisher</a></div>
+                    <div><strong>作者</strong>&emsp;<a href="https://blog.ciaochaos.com/" rel="noopener noreferrer" target="_blank">ciaochaos</a>&emsp;<a href="https://github.com/CPunisher/" rel="noopener noreferrer" target="_blank">CPunisher</a>&ensp;丨&ensp;<a href="https://www.yuque.com/qrbtf/docs/contact" rel="noopener noreferrer" target="_blank">联系我们</a></div>
                     <div className="Gray">Copyright © {currentYear} QRBTF. 保留所有权利。</div>
                     <div className="Gray"><a href="http://www.beian.miit.gov.cn/" rel="noopener noreferrer" target="_blank">浙 ICP 备 19005869 号 </a></div>
                 </div>

src/components/QrRenderer25D.js

@@ -11,10 +11,10 @@ function listPoint(props) {
     const typeTable = getTypeTable(qrcode);
     const pointList = new Array(nCount);
 
-    let type = props.params[0];
+    let size = 1.03;
-    let size = props.params[1] / 100;
+    let size2 = 1.03;
-    let opacity = props.params[2] / 100;
+    let height = props.params[0];
-    let posType = props.params[3];
+    let height2 = props.params[1];
     let id = 0;
 
     const vw = [3, -3];
@@ -26,32 +26,21 @@ function listPoint(props) {
 
     const matrixString = 'matrix(' + String(X[0]) + ', ' + String(X[1]) + ', ' + String(Y[0]) + ', ' + String(Y[1]) + ', ' + String(Z[0]) + ', ' + String(Z[1]) + ')'
 
-
+    if (height <= 0) height = 1.0;
-    if (size <= 0) size = 1.0
+    if (height2 <= 0) height2 = 1.0;
 
     for (let x = 0; x < nCount; x++) {
         for (let y = 0; y < nCount; y++) {
             if (qrcode.isDark(x, y) == false) continue;
-            else if (typeTable[x][y] == QRPointType.POS_CENTER) {
+            else if (typeTable[x][y] == QRPointType.POS_OTHER || typeTable[x][y] == QRPointType.POS_CENTER) {
-                if (posType == 0) {
+                pointList.push(<rect width={size2} height={size2} key={id++} fill="#FF7F89" x={x + (1 - size2)/2} y={y + (1 - size2)/2} transform={matrixString}/>);
-                    pointList.push(<rect width={1} height={1} key={id++} fill="rgb(0,0,0)" x={x} y={y} transform={matrixString}/>);
+                pointList.push(<rect width={height2} height={size2} key={id++} fill="#FFEBF3" x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size2)/2 + size2)+','+String(y + (1 - size2)/2)+') '+'skewY(45) '}/>);
-                    pointList.push(<rect opacity={opacity} width={size/2} height={size} key={id++} fill="rgb(225,225,225)" x={0} y={0} transform={matrixString+'translate('+String(x+1)+','+String(y)+') '+'skewY(45) '}/>);
+                pointList.push(<rect width={size2} height={height2} key={id++} fill="#FFD7D9" x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size2)/2)+','+String(y + size2 + (1 - size2)/2)+') '+'skewX(45) '}/>);
-                    pointList.push(<rect opacity={opacity} width={size} height={size/2} key={id++} fill="rgb(240,240,240)" x={0} y={0} transform={matrixString+'translate('+String(x)+','+String(y+1)+') '+'skewX(45) '}/>);
-                }
-            }
-            else if (typeTable[x][y] == QRPointType.POS_OTHER) {
-                if (posType == 0) {
-                    pointList.push(<rect width={1} height={1} key={id++} fill="rgb(0,0,0)" x={x} y={y} transform={matrixString}/>);
-                    pointList.push(<rect opacity={opacity} width={size/2} height={size} key={id++} fill="rgb(225,225,225)" x={0} y={0} transform={matrixString+'translate('+String(x+1)+','+String(y)+') '+'skewY(45) '}/>);
-                    pointList.push(<rect opacity={opacity} width={size} height={size/2} key={id++} fill="rgb(240,240,240)" x={0} y={0} transform={matrixString+'translate('+String(x)+','+String(y+1)+') '+'skewX(45) '}/>);
-                }
             }
             else {
-                if (type == 0) {
+                pointList.push(<rect width={size} height={size} key={id++} fill="#FF7F89" x={x + (1 - size)/2} y={y + (1 - size)/2} transform={matrixString}/>);
-                    pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="rgb(0,0,0)" x={x + (1 - size)/2} y={y + (1 - size)/2} transform={matrixString}/>);
+                pointList.push(<rect width={height} height={size} key={id++} fill="#FFEBF3" x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size)/2 + size)+','+String(y + (1 - size)/2)+') '+'skewY(45) '}/>);
-                    pointList.push(<rect opacity={opacity} width={size/2} height={size} key={id++} fill="rgb(210,210,210)" x={0} y={0} transform={matrixString+'translate('+String(x+1)+','+String(y)+') '+'skewY(45) '}/>);
+                pointList.push(<rect width={size} height={height} key={id++} fill="#FFD7D9" x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size)/2)+','+String(y + size + (1 - size)/2)+') '+'skewX(45) '}/>);
-                    pointList.push(<rect opacity={opacity} width={size} height={size/2} key={id++} fill="rgb(235,235,235)" x={0} y={0} transform={matrixString+'translate('+String(x)+','+String(y+1)+') '+'skewX(45) '}/>);
-                }
             }
         }
     }
@@ -59,36 +48,25 @@ function listPoint(props) {
     return pointList;
 }
 
+function viewBox(qrcode) {
+    if (!qrcode) return '0 0 0 0';
+
+    const nCount = qrcode.getModuleCount();
+    return String(-nCount) + ' ' + String(-nCount / 2) + ' ' + String(nCount * 2) + ' ' + String(nCount * 2);
+}
+
 export default class QrRenderer25D extends React.Component {
     constructor(props) {
         super(props);
         if (this.props.setParamInfo) {
             this.props.setParamInfo([
                 {
-                    key: '信息点样式',
+                    key: '柱体高度',
-                    default: 0,
+                    default: 1
-                    choices: [
-                        "矩形",
-                        "圆形",
-                        "随机"
-                    ]
                 },
                 {
-                    key: '信息点缩放',
+                    key: '定位点柱体高度',
-                    default: 100
+                    default: 1,
-                },
-                {
-                    key: '信息点不透明度',
-                    default: 100,
-                },
-                {
-                    key: '定位点样式',
-                    default: 0,
-                    choices: [
-                        "矩形",
-                        "圆形",
-                        "行星",
-                    ]
                 },
                 ]
             );
@@ -97,7 +75,7 @@ export default class QrRenderer25D extends React.Component {
 
     render() {
         return (
-            <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(this.props.qrcode)} fill="white"
+            <svg className="Qr-item-svg" width="100%" height="100%" viewBox={viewBox(this.props.qrcode)} fill="white"
                  xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
                 {listPoint(this.props)}
             </svg>

src/components/Qrcode.css

@@ -84,6 +84,8 @@
 
 .Qr-item-image {
     /*padding: 23px;*/
+    overflow: hidden;
+    display: flex;
     background-color: white;
     width: calc((100vw - 56px) / 2);
     height: calc((100vw - 56px) / 2);
@@ -105,6 +107,7 @@
 }
 
 .Qr-item-image-inner {
+    justify-content: center;
     -webkit-transition-timing-function: ease-in-out;
     -moz-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;

src/components/Qrcode.js

@@ -246,15 +246,17 @@ class Qrcode extends React.Component {
                     </div>
                     <div className="Qr-Centered btn-row">
                         <div className="div-btn">
-                            <a href="https://www.yuque.com/qrbtf/docs" rel="noopener noreferrer" target="_blank">
-                                <button className="dl-btn">使用手册</button>
-                            </a>
                             <a href="https://www.yuque.com/qrbtf/topics" rel="noopener noreferrer" target="_blank">
                                 <button className="dl-btn">问题反馈</button>
                             </a>
+                            <a href="https://www.yuque.com/qrbtf/docs/dev" rel="noopener noreferrer" target="_blank">
+                            <button className="dl-btn">开发与设计</button>
+                            </a>
                         </div>
                         <div className="div-btn">
-                            <button disabled className="dl-btn">提交样式</button>
+                            <a href="https://www.yuque.com/qrbtf/docs/coop" rel="noopener noreferrer" target="_blank">
+                                <button className="dl-btn">商业合作</button>
+                            </a>
                         </div>
                     </div>
                 </div>