新增样式
This commit is contained in:
parent
45ef022b78
commit
c9d8eccb06
|
@ -64,7 +64,6 @@
|
||||||
.Qr-s {
|
.Qr-s {
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
overflow-scrolling: touch;
|
|
||||||
width: calc(100vw - var(--scrollbar-width));
|
width: calc(100vw - var(--scrollbar-width));
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, {useEffect, useState} from 'react';
|
import React, {useEffect, useState, Component} from 'react';
|
||||||
import './App.css';
|
import './App.css';
|
||||||
import StyleListViewer from "../../containers/style/StyleListViewer";
|
import StyleListViewer from "../../containers/style/StyleListViewer";
|
||||||
import {isPC} from "../../utils/navigatorUtils";
|
import {isPC} from "../../utils/navigatorUtils";
|
||||||
|
@ -20,7 +20,11 @@ const PartStyles = ({ setParamInfo }) => {
|
||||||
{isPC() ? <div className="Qr-style-hint">拖拽滑动</div> : null}
|
{isPC() ? <div className="Qr-style-hint">拖拽滑动</div> : null}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ScrollContainer className="Qr-s" style={{visibility: loaded ? "visible" :"hidden"}}>
|
<ScrollContainer
|
||||||
|
className="Qr-s"
|
||||||
|
horizontal={true}
|
||||||
|
vertical={false}
|
||||||
|
style={{visibility: loaded ? "visible" :"hidden"}}>
|
||||||
{styleList}
|
{styleList}
|
||||||
</ScrollContainer>
|
</ScrollContainer>
|
||||||
</div>)
|
</div>)
|
||||||
|
|
|
@ -4,6 +4,7 @@ import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
|
||||||
import {createRenderer} from "../style/Renderer";
|
import {createRenderer} from "../style/Renderer";
|
||||||
import LinkTrace from "../link/LinkTrace";
|
import LinkTrace from "../link/LinkTrace";
|
||||||
import RenderDSJ from "./RendererDSJ";
|
import RenderDSJ from "./RendererDSJ";
|
||||||
|
import {rand} from "../../utils/util";
|
||||||
|
|
||||||
function listPoints(qrcode, params) {
|
function listPoints(qrcode, params) {
|
||||||
if (!qrcode) return []
|
if (!qrcode) return []
|
||||||
|
@ -40,7 +41,7 @@ function listPoints(qrcode, params) {
|
||||||
|
|
||||||
for (let x = 0; x < nCount; x++) {
|
for (let x = 0; x < nCount; x++) {
|
||||||
for (let y = 0; y < nCount; y++) {
|
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 (typeTable[x][y] === QRPointType.POS_CENTER) {
|
||||||
if (posType === 0) {
|
if (posType === 0) {
|
||||||
|
@ -192,7 +193,7 @@ function listPoints(qrcode, params) {
|
||||||
let end = 0;
|
let end = 0;
|
||||||
let ctn = true;
|
let ctn = true;
|
||||||
while (ctn && x + end < nCount && y - end >= 0) {
|
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++;
|
end++;
|
||||||
} else {
|
} else {
|
||||||
ctn = false;
|
ctn = false;
|
||||||
|
@ -210,6 +211,45 @@ function listPoints(qrcode, params) {
|
||||||
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5}/>)
|
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5}/>)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
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(<line opacity={opacity} x1={x + 0.5} y1={y + 0.5} x2={x + (end - start - 1) + 0.5} y2={y - (end - start - 1) + 0.5} strokeWidth={size / 2 * rand(0.3,1)} stroke={otherColor} strokeLinecap="round" key={id++}/>)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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(<line opacity={opacity} x1={x + 0.5} y1={y + 0.5} x2={x + end - start - 1 + 0.5} y2={y + end - start - 1 + 0.5} strokeWidth={size / 2 * rand(0.3,1)} stroke={otherColor} strokeLinecap="round" key={id++}/>)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
pointList.push(<circle opacity={opacity} r={0.5 * rand(0.33,0.9)} key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5}/>)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -222,13 +262,14 @@ function getParamInfoLine() {
|
||||||
{
|
{
|
||||||
type: ParamTypes.SELECTOR,
|
type: ParamTypes.SELECTOR,
|
||||||
key: '连线方向',
|
key: '连线方向',
|
||||||
default: 1,
|
default: 2,
|
||||||
choices: [
|
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({
|
export const RendererLine= createRenderer({
|
||||||
listPoints: listPoints,
|
listPoints: listPoints,
|
||||||
getParamInfo: getParamInfoLine,
|
getParamInfo: getParamInfoLine,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
export const RendererLine2= createRenderer({
|
||||||
|
listPoints: listPoints,
|
||||||
|
getParamInfo: getParamInfoLine2,
|
||||||
|
});
|
||||||
|
|
||||||
RendererLine.detail = (
|
RendererLine.detail = (
|
||||||
<div>连连看,可选方向</div>
|
<div>连连看,可选方向</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
RendererLine2.detail = (
|
||||||
|
<div>交错相连</div>
|
||||||
);
|
);
|
|
@ -7,9 +7,9 @@ import RendererRandRect from "../../components/renderer/RendererRandRect";
|
||||||
import Renderer25D from "../../components/renderer/Renderer25D";
|
import Renderer25D from "../../components/renderer/Renderer25D";
|
||||||
import RendererImage from "../../components/renderer/RendererImage";
|
import RendererImage from "../../components/renderer/RendererImage";
|
||||||
import RendererResImage from "../../components/renderer/RendererResImage";
|
import RendererResImage from "../../components/renderer/RendererResImage";
|
||||||
import {RendererRandRound, RendererRect, RendererRound} from "../../components/renderer/RendererBase";
|
import { RendererRandRound, RendererRect, RendererRound } from "../../components/renderer/RendererBase";
|
||||||
import {RendererLine} from "../../components/renderer/RendererLine";
|
import { RendererLine, RendererLine2 } from "../../components/renderer/RendererLine";
|
||||||
import { RendererFuncA , RendererFuncB } from "../../components/renderer/RendererFunc";
|
import { RendererFuncA, RendererFuncB } from "../../components/renderer/RendererFunc";
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
|
|
||||||
const styles = [
|
const styles = [
|
||||||
|
@ -17,6 +17,7 @@ const styles = [
|
||||||
{value: "A2", renderer: RendererRound},
|
{value: "A2", renderer: RendererRound},
|
||||||
{value: "A3", renderer: RendererRandRound},
|
{value: "A3", renderer: RendererRandRound},
|
||||||
{value: "A — a1", renderer: RendererLine},
|
{value: "A — a1", renderer: RendererLine},
|
||||||
|
{value: "A — a2", renderer: RendererLine2},
|
||||||
{value: "A — b1", renderer: RendererFuncA},
|
{value: "A — b1", renderer: RendererFuncA},
|
||||||
{value: "A — b2", renderer: RendererFuncB},
|
{value: "A — b2", renderer: RendererFuncB},
|
||||||
{value: "SP — 1", renderer: RendererDSJ},
|
{value: "SP — 1", renderer: RendererDSJ},
|
||||||
|
|
Loading…
Reference in New Issue