From 9b463cf44fbfe74d33bb3a4d82356f321f85bb69 Mon Sep 17 00:00:00 2001 From: ciaochaos <1272777550@qq.com> Date: Mon, 22 Jun 2020 10:59:17 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=A0=B7=E5=BC=8F=20A=20?= =?UTF-8?q?=E2=80=94=20b?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/renderer/RendererFunc.js | 212 ++++++++++++++++++++++++ src/containers/style/StyleListViewer.js | 3 + 2 files changed, 215 insertions(+) create mode 100644 src/components/renderer/RendererFunc.js diff --git a/src/components/renderer/RendererFunc.js b/src/components/renderer/RendererFunc.js new file mode 100644 index 0000000..683d75f --- /dev/null +++ b/src/components/renderer/RendererFunc.js @@ -0,0 +1,212 @@ +import React from "react"; +import {ParamTypes} from "../../constant/ParamTypes"; +import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler"; +import {createRenderer} from "../style/Renderer"; +import {rand} from "../../utils/util"; + +function listPoints(qrcode, params) { + if (!qrcode) return [] + + const nCount = qrcode.getModuleCount(); + const typeTable = getTypeTable(qrcode); + const pointList = new Array(nCount); + + let type = params[0]; + let size = params[1] / 100; + let funcType = params[1]; + let opacity = params[2] / 100; + let posType = params[3]; + let id = 0; + let otherColor = params[4]; + let otherColor2 = params[5]; + let posColor = params[6]; + + const vw = [3, -3]; + const vh = [3, -3]; + + const sq25 = "M32.048565,-1.29480038e-15 L67.951435,1.29480038e-15 C79.0954192,-7.52316311e-16 83.1364972,1.16032014 87.2105713,3.3391588 C91.2846454,5.51799746 94.4820025,8.71535463 96.6608412,12.7894287 C98.8396799,16.8635028 100,20.9045808 100,32.048565 L100,67.951435 C100,79.0954192 98.8396799,83.1364972 96.6608412,87.2105713 C94.4820025,91.2846454 91.2846454,94.4820025 87.2105713,96.6608412 C83.1364972,98.8396799 79.0954192,100 67.951435,100 L32.048565,100 C20.9045808,100 16.8635028,98.8396799 12.7894287,96.6608412 C8.71535463,94.4820025 5.51799746,91.2846454 3.3391588,87.2105713 C1.16032014,83.1364972 5.01544207e-16,79.0954192 -8.63200256e-16,67.951435 L8.63200256e-16,32.048565 C-5.01544207e-16,20.9045808 1.16032014,16.8635028 3.3391588,12.7894287 C5.51799746,8.71535463 8.71535463,5.51799746 12.7894287,3.3391588 C16.8635028,1.16032014 20.9045808,7.52316311e-16 32.048565,-1.29480038e-15 Z"; + + if (size <= 0) size = 1.0 + + function f(nCount, x, y, funcType) { + const dist = Math.sqrt(Math.pow((nCount - 1)/2 - x, 2) + Math.pow((nCount - 1)/2 - y, 2)) / (nCount / 2 * Math.sqrt(2)); + let sizeF = 0 + let colorF = otherColor + if (funcType === 0) { + sizeF = (1 - Math.cos(Math.PI * dist))/6 + 1/5; + } + if (funcType === 1) { + if (dist > 3/10 && dist < 2/5) { + sizeF = 5/10 + colorF = otherColor2 + } else { + sizeF = 1/5 + } + } + return [sizeF, colorF] + } + + for (let x = 0; x < nCount; x++) { + for (let y = 0; y < nCount; y++) { + if (qrcode.isDark(x, y) === false) continue; + + if (typeTable[x][y] === QRPointType.POS_CENTER) { + if (posType === 0) { + pointList.push(); + } else if (posType === 1) { + pointList.push() + pointList.push() + } else if (posType === 2) { + pointList.push() + pointList.push() + for (let w = 0; w < vw.length; w++) { + pointList.push() + } + for (let h = 0; h < vh.length; h++) { + pointList.push() + } + } else if (posType === 3) { + pointList.push() + pointList.push() + } + } + else if (typeTable[x][y] === QRPointType.POS_OTHER) { + if (posType === 0) { + pointList.push(); + } + } + else { + if (type === 0) { + const F = f(nCount, x, y, funcType); + const sizeF = F[0] + 0.2; + pointList.push() + } + else if (type === 1) { + const F = f(nCount, x, y, funcType); + pointList.push() + } + } + } + } + + return pointList; +} + +function getParamInfoFuncA() { + return [ + { + type: ParamTypes.SELECTOR, + key: '信息点样式', + default: 0, + choices: [ + "矩形", + "圆形", + ] + }, + { + type: ParamTypes.SELECTOR, + key: '干扰函数', + default: 0, + choices: [ + "A", + "B", + ] + }, + { + type: ParamTypes.TEXT_EDITOR, + key: '信息点不透明度', + default: 100, + }, + { + type: ParamTypes.SELECTOR, + key: '定位点样式', + default: 0, + choices: [ + "矩形", + "圆形", + "行星", + "圆角矩形", + ] + }, + { + type: ParamTypes.COLOR_EDITOR, + key: '信息点颜色 1', + default: '#000000' + }, + { + type: ParamTypes.COLOR_EDITOR, + key: '信息点颜色 2', + default: '#000000' + }, + { + type: ParamTypes.COLOR_EDITOR, + key: '定位点点颜色', + default: '#000000' + } + ]; +} + +function getParamInfoFuncB() { + return [ + { + type: ParamTypes.SELECTOR, + key: '信息点样式', + default: 1, + choices: [ + "矩形", + "圆形", + ] + }, + { + type: ParamTypes.SELECTOR, + key: '干扰函数', + default: 1, + choices: [ + "A", + "B", + ] + }, + { + type: ParamTypes.TEXT_EDITOR, + key: '信息点不透明度', + default: 100, + }, + { + type: ParamTypes.SELECTOR, + key: '定位点样式', + default: 1, + choices: [ + "矩形", + "圆形", + "行星", + "圆角矩形", + ] + }, + { + type: ParamTypes.COLOR_EDITOR, + key: '信息点颜色 1', + default: '#ABB8C3' + }, + { + type: ParamTypes.COLOR_EDITOR, + key: '信息点颜色 2', + default: '#FF8200' + }, + { + type: ParamTypes.COLOR_EDITOR, + key: '定位点点颜色', + default: '#000000' + } + ]; +} + + +export const RendererFuncA= createRenderer({ + listPoints: listPoints, + getParamInfo: getParamInfoFuncA, +}); + +export const RendererFuncB= createRenderer({ + listPoints: listPoints, + getParamInfo: getParamInfoFuncB, +}); \ No newline at end of file diff --git a/src/containers/style/StyleListViewer.js b/src/containers/style/StyleListViewer.js index da1996c..a5c5492 100644 --- a/src/containers/style/StyleListViewer.js +++ b/src/containers/style/StyleListViewer.js @@ -9,6 +9,7 @@ import RendererImage from "../../components/renderer/RendererImage"; import RendererResImage from "../../components/renderer/RendererResImage"; import {RendererRandRound, RendererRect, RendererRound} from "../../components/renderer/RendererBase"; import {RendererLine} from "../../components/renderer/RendererLine"; +import { RendererFuncA , RendererFuncB } from "../../components/renderer/RendererFunc"; import * as React from "react"; const styles = [ @@ -16,6 +17,8 @@ const styles = [ {value: "A2", renderer: RendererRound}, {value: "A3", renderer: RendererRandRound}, {value: "A — a1", renderer: RendererLine}, + {value: "A — b1", renderer: RendererFuncA}, + {value: "A — b2", renderer: RendererFuncB}, {value: "SP — 1", renderer: RendererDSJ}, {value: "SP — 2", renderer: RendererRandRect}, {value: "B1", renderer: Renderer25D},