From c9d8eccb06b50ac6247d535d5751a5e4209a07e0 Mon Sep 17 00:00:00 2001 From: ciaochaos <1272777550@qq.com> Date: Mon, 22 Jun 2020 21:01:03 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Qrcode.css | 1 - src/components/app/PartStyles.js | 8 +- src/components/renderer/RendererLine.js | 107 +++++++++++++++++++++++- src/containers/style/StyleListViewer.js | 7 +- 4 files changed, 113 insertions(+), 10 deletions(-) diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css index a68add0..72c4d57 100644 --- a/src/components/Qrcode.css +++ b/src/components/Qrcode.css @@ -64,7 +64,6 @@ .Qr-s { overflow-x: scroll; overflow-y: hidden; - overflow-scrolling: touch; width: calc(100vw - var(--scrollbar-width)); white-space: nowrap; display: flex; diff --git a/src/components/app/PartStyles.js b/src/components/app/PartStyles.js index 7aafe19..09ee9ba 100644 --- a/src/components/app/PartStyles.js +++ b/src/components/app/PartStyles.js @@ -1,4 +1,4 @@ -import React, {useEffect, useState} from 'react'; +import React, {useEffect, useState, Component} from 'react'; import './App.css'; import StyleListViewer from "../../containers/style/StyleListViewer"; import {isPC} from "../../utils/navigatorUtils"; @@ -20,7 +20,11 @@ const PartStyles = ({ setParamInfo }) => { {isPC() ?
拖拽滑动
: null} - + {styleList} ) diff --git a/src/components/renderer/RendererLine.js b/src/components/renderer/RendererLine.js index a045f91..52241bb 100644 --- a/src/components/renderer/RendererLine.js +++ b/src/components/renderer/RendererLine.js @@ -4,6 +4,7 @@ import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler"; import {createRenderer} from "../style/Renderer"; import LinkTrace from "../link/LinkTrace"; import RenderDSJ from "./RendererDSJ"; +import {rand} from "../../utils/util"; function listPoints(qrcode, params) { if (!qrcode) return [] @@ -40,7 +41,7 @@ function listPoints(qrcode, params) { for (let x = 0; x < nCount; x++) { for (let y = 0; y < nCount; y++) { - if (!available[x][y] || !ava2[x][y] || qrcode.isDark(x, y) === false) continue; + if (qrcode.isDark(x, y) === false) continue; if (typeTable[x][y] === QRPointType.POS_CENTER) { if (posType === 0) { @@ -192,7 +193,7 @@ function listPoints(qrcode, params) { let end = 0; let ctn = true; while (ctn && x + end < nCount && y - end >= 0) { - if (qrcode.isDark(x + end, y - end) && ava2[x + end][y - end]) { + if (qrcode.isDark(x + end, y - end) && available[x + end][y - end]) { end++; } else { ctn = false; @@ -210,6 +211,45 @@ function listPoints(qrcode, params) { pointList.push() } } + if (type === 5) { + if (x === 0 || y === nCount - 1 || ((x > 0 && y < nCount - 1) && (!qrcode.isDark(x - 1, y + 1) || !ava2[x - 1][y + 1]))) { + let start = 0; + let end = 0; + let ctn = true; + while (ctn && x + end < nCount && y - end >= 0) { + if (qrcode.isDark(x + end, y - end) && ava2[x + end][y - end]) { + end++; + } else { + ctn = false; + } + } + if (end - start > 1) { + for (let i = start; i < end; i++) { + ava2[x + i][y - i] = false; + } + pointList.push() + } + } + if (y === 0 || x === 0 || ((y > 0 && x > 0) && (!qrcode.isDark(x - 1, y - 1) || !available[x - 1][y - 1]))) { + let start = 0; + let end = 0; + let ctn = true; + while (ctn && y + end < nCount && x + end < nCount) { + if (qrcode.isDark(x + end, y + end) && available[x + end][y + end]) { + end++; + } else { + ctn = false; + } + } + if (end - start > 1) { + for (let i = start; i < end; i++) { + available[x + i][y + i] = false; + } + pointList.push() + } + } + pointList.push() + } } } } @@ -222,13 +262,14 @@ function getParamInfoLine() { { type: ParamTypes.SELECTOR, key: '连线方向', - default: 1, + default: 2, choices: [ "左右", "上下", "纵横", "左上 — 右下", - "右上 — 左下" + "右上 — 左下", + "交叉" ] }, { @@ -265,11 +306,69 @@ function getParamInfoLine() { ]; } +function getParamInfoLine2() { + return [ + { + type: ParamTypes.SELECTOR, + key: '连线方向', + default: 5, + choices: [ + "左右", + "上下", + "纵横", + "左上 — 右下", + "右上 — 左下", + "交叉" + ] + }, + { + type: ParamTypes.TEXT_EDITOR, + key: '连线粗细', + default: 50 + }, + { + type: ParamTypes.TEXT_EDITOR, + key: '连线不透明度', + default: 100, + }, + { + type: ParamTypes.SELECTOR, + key: '定位点样式', + default: 0, + choices: [ + "矩形", + "圆形", + "行星", + "圆角矩形", + ] + }, + { + type: ParamTypes.COLOR_EDITOR, + key: '连线颜色', + default: '#000000' + }, + { + type: ParamTypes.COLOR_EDITOR, + key: '定位点点颜色', + default: '#000000' + } + ]; +} + export const RendererLine= createRenderer({ listPoints: listPoints, getParamInfo: getParamInfoLine, }); +export const RendererLine2= createRenderer({ + listPoints: listPoints, + getParamInfo: getParamInfoLine2, +}); + RendererLine.detail = (
连连看，可选方向
+); + +RendererLine2.detail = ( +
交错相连
); \ No newline at end of file diff --git a/src/containers/style/StyleListViewer.js b/src/containers/style/StyleListViewer.js index 6f1e730..89a2c76 100644 --- a/src/containers/style/StyleListViewer.js +++ b/src/containers/style/StyleListViewer.js @@ -7,9 +7,9 @@ import RendererRandRect from "../../components/renderer/RendererRandRect"; import Renderer25D from "../../components/renderer/Renderer25D"; 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 { RendererRandRound, RendererRect, RendererRound } from "../../components/renderer/RendererBase"; +import { RendererLine, RendererLine2 } from "../../components/renderer/RendererLine"; +import { RendererFuncA, RendererFuncB } from "../../components/renderer/RendererFunc"; import * as React from "react"; const styles = [ @@ -17,6 +17,7 @@ const styles = [ {value: "A2", renderer: RendererRound}, {value: "A3", renderer: RendererRandRound}, {value: "A — a1", renderer: RendererLine}, + {value: "A — a2", renderer: RendererLine2}, {value: "A — b1", renderer: RendererFuncA}, {value: "A — b2", renderer: RendererFuncB}, {value: "SP — 1", renderer: RendererDSJ},