新增样式 C3

src/components/app/PartMore.js

@@ -51,7 +51,7 @@ const PartMore = () => {
                     </ScrollContainer>
                     <div className="Qr-Centered">
                         <h2>最新消息</h2>
-                        <p><b>2020.9.1</b><br/>新增图标插入、 PNG 下载。</p>
+                        <p><b>2020.9.1</b><br/>新增 C3 样式、图标插入、 PNG 下载。</p>
                         <p><b>2020.6.29</b><br/>新的反馈渠道！我们开始征集好玩的二维码设计啦，可以是推送尾图、海报等等，快来上传吧。<LinkTrace
                             href='https://qrbtf-com.mikecrm.com/J2wjEEq' rel="noopener noreferrer"
                             target="_blank">点击提交</LinkTrace>。</p>

src/components/renderer/RendererImageFill.js

@@ -0,0 +1,62 @@
+import React  from "react";
+import {ParamTypes} from "../../constant/ParamTypes";
+import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
+import {createRenderer} from "../style/Renderer";
+import {defaultImage} from "../../constant/References";
+
+function listPoints({ qrcode, params, icon }) {
+    if (!qrcode) return []
+
+    const nCount = qrcode.getModuleCount();
+    const typeTable = getTypeTable(qrcode);
+    const pointList = new Array(nCount);
+
+    let color = params[1];
+    let opacity = params[2] / 100;
+    let id = 0;
+
+    pointList.push(<image key={id++} x="-0.01" y="-0.01" width={nCount + 0.02} height={nCount + 0.02} xlinkHref={params[0]}/>);
+    pointList.push(<rect key={id++} x="-0.01" y="-0.01" width={nCount + 0.02} height={nCount + 0.02} fill={color} opacity={opacity}/>);
+
+    for (let x = 0; x < nCount; x++) {
+        for (let y = 0; y < nCount; y++) {
+            if (!qrcode.isDark(x, y)) {
+                pointList.push(<rect width={1.02} height={1.02} key={id++} fill="#FFF" x={x - 0.01} y={y - 0.01}/>);
+            }
+        }
+    }
+
+    return pointList;
+}
+
+function getParamInfo() {
+    return [
+        {
+            type: ParamTypes.UPLOAD_BUTTON,
+            key: '背景图片',
+            default: defaultImage,
+        },
+        {
+            type: ParamTypes.COLOR_EDITOR,
+            key: '覆盖颜色',
+            default: '#000000'
+        },
+        {
+            type: ParamTypes.TEXT_EDITOR,
+            key: '覆盖不透明度',
+            default: 10,
+        },
+    ];
+}
+
+const RendererImageFill = createRenderer({
+    listPoints: listPoints,
+    getParamInfo: getParamInfo,
+})
+
+
+export default RendererImageFill
+
+RendererImageFill.detail = (
+    <div>图像填充</div>
+);

src/containers/style/StyleListViewer.js

@@ -12,6 +12,7 @@ import { RendererRandRound, RendererRect, RendererRound } from "../../components
 import { RendererLine, RendererLine2 } from "../../components/renderer/RendererLine";
 import { RendererFuncA, RendererFuncB } from "../../components/renderer/RendererFunc";
 import * as React from "react";
+import RendererImageFill from "../../components/renderer/RendererImageFill";
 
 const styles = [
     {value: "A1", renderer: RendererRect},
@@ -23,6 +24,7 @@ const styles = [
     {value: "A3", renderer: RendererRandRound},
     {value: "A — b2", renderer: RendererFuncB},
     {value: "C1", renderer: RendererImage},
+    {value: "C3", renderer: RendererImageFill},
     {value: "B1", renderer: Renderer25D},
     {value: "A — a2", renderer: RendererLine2},
     {value: "A — b1", renderer: RendererFuncA},