Skip to content

Commit

Permalink
shadow字段空格替换成单个
Browse files Browse the repository at this point in the history
  • Loading branch information
@lingxiaoyi
lingxiaoyi committed Sep 23, 2019
1 parent ddff511 commit d299c57
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 55 deletions.
61 changes: 23 additions & 38 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,18 +70,6 @@ class App extends React.Component {
font.load(); */
//this.confirmImportCode();
this.addEventListener();
//this.addShape(1);
this.addShape(3);
this.addShape(3);
this.addShape(3);
this.addShape(3);
this.addShape(3);
this.addShape(3);
this.addShape(3);
this.addShape(3);
this.addShape(3);
this.addShape(3);
//this.addShape(4);
/* this.addShape(1);
this.addShape(2);
this.addShape(3);
Expand Down Expand Up @@ -296,6 +284,7 @@ class App extends React.Component {
maxLines = maxLines / 1;
padding = 0 /* padding / 1 */;
lineHeight = lineHeight / 1; //和painter调试得出的值
shadow = shadow.trim().split(/\s+/).join(' ');
let Shape;
let config = {
width, //文字的高度随行高
Expand Down Expand Up @@ -457,6 +446,7 @@ class App extends React.Component {
borderRadius = borderRadius / 1;
borderWidth = borderWidth / 1;
rotate = rotate / 1;
shadow = shadow.trim().split(/\s+/).join(' ');
let group = new fabric.Group([], {
left: left + width / 2 + borderWidth,
top: top + height / 2 + borderWidth,
Expand Down Expand Up @@ -548,7 +538,7 @@ class App extends React.Component {
borderRadius = borderRadius / 1;
borderWidth = borderWidth / 1;
rotate = rotate / 1;

shadow = shadow.trim().split(/\s+/).join(' ');
let Shape = await this.loadImageUrl(url);
let imgWidth = Shape.width;
let imgHeight = Shape.height;
Expand Down Expand Up @@ -1002,6 +992,7 @@ ${json.plain(this.finallObj).replace(/px/g, 'px')}
}
}
`;
this.MarkdownCode = `${json.plain(this.finallObj).replace(/px/g, 'px')}`;
//console.log('finallObj', json.plain(this.finallObj).replace(/px/g, 'rpx'));
}
clearCanvas() {
Expand Down Expand Up @@ -1043,12 +1034,6 @@ ${json.plain(this.finallObj).replace(/px/g, 'px')}
}
confirmImportCode() {
let canvas_sprite = this.canvas_sprite;

/* const delay = ms =>
new Promise(resolve => {
clearTimeout(this.delayT);
this.delayT = setTimeout(resolve, ms);
}); */
canvas_sprite.loadFromJSON(this.state.importCodeJson, async () => {
this.setState({
visibleImportCode: false
Expand All @@ -1058,9 +1043,7 @@ ${json.plain(this.finallObj).replace(/px/g, 'px')}
const element = Objects[index];
this.activeObject = element;
this.changeActiveObjectValue();
//await delay(0);
await this.updateObject();
//await delay(0);
}
this.setState({
importCodeJson: ''
Expand Down Expand Up @@ -1101,8 +1084,14 @@ ${json.plain(this.finallObj).replace(/px/g, 'px')}
_config.undoFinishedStatus = 0;
if (_config.currentStateIndex !== 0) {
_config.undoStatus = true;
canvas_sprite.loadFromJSON(_config.canvasState[_config.currentStateIndex - 1], function() {
//var jsonData = JSON.parse(_config.canvasState[_config.currentStateIndex - 1]);
canvas_sprite.loadFromJSON(_config.canvasState[_config.currentStateIndex - 1], async function() {
let Objects = canvas_sprite.getObjects();
for (let index = 0; index < Objects.length; index++) {
const element = Objects[index];
that.activeObject = element;
that.changeActiveObjectValue();
await that.updateObject();
}
canvas_sprite.renderAll();
_config.undoStatus = false;
_config.currentStateIndex -= 1;
Expand Down Expand Up @@ -1141,8 +1130,14 @@ ${json.plain(this.finallObj).replace(/px/g, 'px')}
if (_config.canvasState.length > _config.currentStateIndex && _config.canvasState.length !== 0) {
_config.redoFinishedStatus = 0;
_config.redoStatus = true;
canvas_sprite.loadFromJSON(_config.canvasState[_config.currentStateIndex + 1], function() {
//var jsonData = JSON.parse(_config.canvasState[_config.currentStateIndex + 1]);
canvas_sprite.loadFromJSON(_config.canvasState[_config.currentStateIndex + 1], async function() {
let Objects = canvas_sprite.getObjects();
for (let index = 0; index < Objects.length; index++) {
const element = Objects[index];
that.activeObject = element;
that.changeActiveObjectValue();
await that.updateObject();
}
canvas_sprite.renderAll();
_config.redoStatus = false;
_config.currentStateIndex += 1;
Expand Down Expand Up @@ -1172,26 +1167,16 @@ ${json.plain(this.finallObj).replace(/px/g, 'px')}
<div className='main-container'>
<div className='box'>
<div className='btns'>
{/* <div className='btn'>
<Button type='primary' onClick={this.handerUndo}>
撤销
</Button>
</div>
<div className='btn'>
<Button type='primary' onClick={this.handerRedo}>
恢复
</Button>
</div> */}
<div className='btn'>
<Button type='primary' onClick={this.copyCode}>
复制代码
</Button>
</div>
{/* <div className='btn'>
<div className='btn'>
<Button type='primary' onClick={this.viewCode}>
查看代码
</Button>
</div> */}
</div>
<div className='btn'>
<Button type='primary' onClick={this.exportCode}>
导出json
Expand Down Expand Up @@ -1402,7 +1387,7 @@ ${json.plain(this.finallObj).replace(/px/g, 'px')}
>
<ReactMarkdown
source={`\`\`\`
${this.miniCode}
${this.MarkdownCode}
`}
/>
</Modal>
Expand Down
30 changes: 13 additions & 17 deletions src/optionArr.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,14 @@ let optionArr = [
//background: 'radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%)',
width: 200,
height: 122, //高度,没有的话就自适应
left: 202,
left: 452,
top: 0,
background: '#ffffff',
background: '#000000',
rotate: 0,
borderRadius: 0,
borderWidth: 1,
borderWidth: 0,
borderColor: '#ff0000',
shadow: '10 10 5 #888888' //阴影
shadow: '' //阴影
}
},
{
Expand All @@ -60,15 +60,15 @@ let optionArr = [
css: {
url: 'https://operate.maiyariji.com/20190709%2F3da002983292a6950a71ca7392a21827.jpg',
mode: ['scaleToFill', 'aspectFill', 'auto'],
width: 100,
height: 100, //高度,没有的话就自适应
width: 400,
height: 200, //高度,没有的话就自适应
left: 0,
top: 0,
top: 300,
rotate: 0,
borderRadius: 50,
borderWidth: 2,
borderRadius: 10,
borderWidth: 0,
borderColor: '#000000',
shadow: '10 10 5 #888888' //阴影
shadow: '10 10 10 #888888' //阴影
}
},
{
Expand All @@ -77,16 +77,12 @@ let optionArr = [
css: {
url: '哈哈哈',
width: 200,
left: 0,
top: 135,
left: 454,
top: 303,
color: '#000000', //字体颜色 linear-gradient(-135deg, #fedcba 0%, rgba(18, 52, 86, 1) 20%, #987 80%)
background: '#ffffff', //文字区域背景色
rotate: 0,
borderRadius: 10/* ,
borderWidth: 0,
borderColor: '#000000', */
//align: ['center', 'left', 'right'], //view 的对齐方式
//padding: '3'
borderRadius: 10
}
}
];
Expand Down

0 comments on commit d299c57

Please sign in to comment.