24kycj
5762 lines
355 KiB
HTML
5762 lines
355 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<title>Soon Design</title>
|
|
<link rel="stylesheet" href="./layui/css/layui.css">
|
|
<link rel="stylesheet" href="./public/css/design.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="layui-fluid main" style="display: none">
|
|
<div class="layui-row" style="height: 100%;width: 100%">
|
|
<div class="col-right">
|
|
<div class="tools-bar right-bar">
|
|
|
|
<div class="mode2">
|
|
<div class="tool">
|
|
<img src="public/images/top24.png" id="top_alignment" language="t" zh="顶部对齐" ozh="頂部對齊"
|
|
en="Top Alignment" />
|
|
</div>
|
|
<div class="tool">
|
|
<img src="public/images/bottom24.png" id="bottom_alignment" language="t" zh="底部对齐"
|
|
ozh="底部對齊" en="Bottom Alignment" />
|
|
</div>
|
|
<div class="tool">
|
|
<img src="public/images/center_y24.png" id="center_y_alignment" language="t" zh="居中对齐"
|
|
ozh="居中對齊" en="Center Alignment" />
|
|
</div>
|
|
</div>
|
|
<div class="mode2" style="margin-left: 2px;border-right: 0px">
|
|
<div class="tool">
|
|
<img src="public/images/left24.png" id="left_alignment" language="t" zh="左对齐" ozh="左對齊"
|
|
en="Left Alignment" />
|
|
</div>
|
|
<div class="tool">
|
|
<img src="public/images/right24.png" id="right_alignment" language="t" zh="右对齐" ozh="右對齊"
|
|
en="Right Alignment" />
|
|
</div>
|
|
<div class="tool">
|
|
<img src="public/images/center_x24.png" id="center_x_alignment" language="t" zh="居中对齐"
|
|
ozh="居中對齊" en="Center Alignment" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="object_attribute">
|
|
<div class="component-title" zh="对象属性" ozh="對象屬性" en="Object Properties" language="m"></div>
|
|
<div>
|
|
<div class="component-line">
|
|
<span class="name" zh="类型：" ozh="類型：" en="Type:" language="m"></span>
|
|
<span id="component_type" zh="背景" ozh="背景" en="Background" language="m"></span>
|
|
</div>
|
|
<div id="base_control">
|
|
<div class="component-line">
|
|
<div class="ui-button" id="up_obj" language="m" zh="移至上层" ozh="移至上層" en="upper layer">
|
|
</div>
|
|
<div class="ui-button" id="down_obj" language="m" zh="移至下层" ozh="移至下層" en="upper layer">
|
|
</div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name">X:</span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 80px" id="text_x" />
|
|
|
|
<span class="name">Y:</span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 80px" id="text_y" />
|
|
<div style="height: 20px;width: 20px;display: inline-block;" class="ui-radio" id="lock">
|
|
<img src="public/images/unlock20.png" id="lock_img">
|
|
</div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name">H:</span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 80px" id="text_h" />
|
|
<span class="name">W:</span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 80px" id="text_w" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="角度：" ozh="角度：" en="Angle"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 80px" id="text_r" />
|
|
<img src="public/images/rotate20.png" language="t" zh="旋转90°" ozh="旋轉90°"
|
|
en="Rotate 90°" id="rotate" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="使用黑色带打印：" ozh="使用黑色帶打印：" en="Print use K:"></span>
|
|
<input type="checkbox" name="text_black" id="text_black" class="radio">
|
|
</div>
|
|
</div>
|
|
<div id="pic_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="不透明度：" ozh="不透明度：" en="Opacity:"></span>
|
|
<div id="pic_op"
|
|
style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
|
|
</div>
|
|
</div>
|
|
<div class="pic_bg" id="set_bg" language="m" zh="设为背景" ozh="設爲背景" en="Set as background">
|
|
</div>
|
|
<!-- <div class="component-line">
|
|
<span class="name" language="m" zh="使用黑色带打印：" ozh="使用黑色帶打印：" en="Print use K:"></span>
|
|
<input type="checkbox" name="pic_black" id="pic_black" class="radio">
|
|
</div>
|
|
-->
|
|
</div>
|
|
<div id="out_pic_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字段名：" ozh="字段名：" en="Field Name:"></span>
|
|
<input type="text" id="out_pic_field_name" class="ui-input" style="width: 50%" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="不透明度：" ozh="不透明度：" en="Opacity:"></span>
|
|
<div id="out_pic_op"
|
|
style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="使用黑色带打印：" ozh="使用黑色帶打印：" en="Print use K:"></span>
|
|
<input type="checkbox" name="out_pic_black" id="out_pic_black" class="radio">
|
|
</div>
|
|
-->
|
|
</div>
|
|
<div id="text_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" style="position: relative;top:-45px" language="m" zh="文本：" ozh="文本："
|
|
en="Text:">文本:</span>
|
|
<textarea rows="3" style="height: 60px" id="text_text"></textarea>
|
|
</div>
|
|
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字体：" ozh="字體：" en="Fonts:"></span>
|
|
<select class="ui-select" id="text_font_family">
|
|
</select>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字号：" ozh="字號：" en="Size:"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50%" id="text_size" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
|
|
<input type="color" id="text_color" class="input_color">
|
|
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="text_italics">
|
|
<img src="public/images/italics24.png">
|
|
</div>
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="text_underline">
|
|
<img src="public/images/underline24.png">
|
|
</div>
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="text_bold">
|
|
<img src="public/images/bold24.png">
|
|
</div>
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="text_linethrough">
|
|
<img src="public/images/linethrough24.png">
|
|
</div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="背景颜色：" ozh="背景顏色：" en="Background color:"></span>
|
|
<input type="color" id="text_back_color" class="input_color">
|
|
<div class="transparent-button" id="text_back_transparent" language="m" zh="透明" ozh="透明"
|
|
en="Transparent"></div>
|
|
</div>
|
|
</div>
|
|
<div id="out_text_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字段名：" ozh="字段名：" en="Field Name:"></span>
|
|
<input type="text" id="out_text_field_name" class="ui-input" style="width: 50%" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="示例数据" ozh="示例數據" en="Sample Text:"></span>
|
|
<input type="text" id="out_text_text" class="ui-input" style="width: 50%" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字体：" ozh="字體：" en="Font:"></span>
|
|
<select class="ui-select" id="out_text_font_family">
|
|
</select>
|
|
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字号：" ozh="字號：" en="Size:"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50%" id="out_text_size" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
|
|
<input type="color" id="out_text_color" class="input_color">
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="out_text_italics">
|
|
<img src="public/images/italics24.png">
|
|
</div>
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="out_text_underline">
|
|
<img src="public/images/underline24.png">
|
|
</div>
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="out_text_bold">
|
|
<img src="public/images/bold24.png">
|
|
</div>
|
|
<div style="height: 24px;width: 24px;display: inline-block;position: relative;bottom: 4px;"
|
|
class="ui-radio" id="out_text_linethrough">
|
|
<img src="public/images/linethrough24.png">
|
|
</div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="背景颜色：" ozh="背景顏色：" en="Background color:"></span>
|
|
<input type="color" id="out_text_back_color" class="input_color">
|
|
<div class="transparent-button" id="out_text_back_transparent" language="m" zh="透明"
|
|
ozh="透明" en="Transparent"></div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="如果文本被截断，则作业失败" ozh="如果文本被截斷，則作業失敗"
|
|
en="If the text is truncated, the operation fails"></span>
|
|
<input type="checkbox" name="exceed" id="exceed" class="radio">
|
|
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="自动换行：" ozh="自動換行：" en="Automatic line feed:"></span>
|
|
<input type="checkbox" name="autoWrap" id="autoWrap" class="radio">
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="固定大小：" ozh="固定大小：" en="Fixed Size:"></span>
|
|
<input type="checkbox" name="fixSize" id="fixSize" class="radio">
|
|
</div>
|
|
</div>
|
|
<div id="rect_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="填充：" ozh="填充：" en="Fill:"></span>
|
|
<input type="color" id="rect_color" class="input_color">
|
|
<div class="transparent-button" id="rect_transparent" language="m" zh="透明" ozh="透明"
|
|
en="Transparent"></div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="边框：" ozh="邊框：" en="Border:"></span>
|
|
<input type="color" id="rect_stroke" class="input_color">
|
|
<div class="transparent-button" id="rect_stroke_transparent" language="m" zh="透明"
|
|
ozh="透明" en="Transparent"></div>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50px;height:25px;position:relative;bottom:2px"
|
|
id="rect_stroke_width" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="圆角：" ozh="圓角：" en="Radius:"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50px;height:25px;position:relative;bottom:2px" id="rect_radius" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="不透明度：" ozh="不透明度：" en="Opacity:"></span>
|
|
<div id="rect_op"
|
|
style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="line_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
|
|
<input type="color" id="line_color" class="input_color">
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="虚线间距：" ozh="虛線間距：" en="Spacing:"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50%" id="line_dist" />
|
|
</div>
|
|
</div>
|
|
<div id="circle_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="填充：" ozh="填充：" en="Fill:"></span>
|
|
<input type="color" id="circle_color" class="input_color">
|
|
<div class="transparent-button" id="circle_transparent" language="m" zh="透明" ozh="透明"
|
|
en="Transparent"></div>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="边框：" ozh="邊框：" en="Border:"></span>
|
|
<input type="color" id="circle_stroke" class="input_color">
|
|
<div class="transparent-button" id="circle_stroke_transparent" language="m" zh="透明"
|
|
ozh="透明" en="Transparent"></div>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50px;height:25px;position:relative;bottom:2px"
|
|
id="circle_stroke_width" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="不透明度：" ozh="不透明度：" en="Opacity:"></span>
|
|
<div id="circle_op"
|
|
style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="qrcode_Controll" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字段名：" ozh="字段名：" en="Field Name:"></span>
|
|
<input type="text" id="qrcode_field_name" class="ui-input" style="width: 50%" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
|
|
<input type="color" id="qrcode_color" class="input_color">
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="示例数据" ozh="示例數據" en="Sample Text:"></span>
|
|
<input type="text" id="qrcode_val" class="ui-input" style="width: 50%" />
|
|
</div>
|
|
</div>
|
|
<div id="barcode_controll" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字段名：" ozh="字段名：" en="Field Name:"></span>
|
|
<input type="text" id="barcode_field_name" class="ui-input" style="width: 50%" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="示例数据" ozh="示例數據" en="Sample Text:"></span>
|
|
<input type="text" id="barcode_val" class="ui-input" style="width: 50%" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="取消文字：" ozh="取消文字：" en="Cancel text:"></span>
|
|
<input type="checkbox" name="barcode_show" id="barcode_show" class="radio">
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字体：" ozh="字體：" en="Font:"></span>
|
|
<select class="ui-select" id="barcode_font_family">
|
|
</select>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字号：" ozh="字號：" en="Size:"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50%" id="barcode_size" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
|
|
<input type="color" id="barcode_color" class="input_color">
|
|
</div>
|
|
</div>
|
|
<div id="counter_control" class="control">
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字体：" ozh="字體：" en="Font:"></span>
|
|
<select class="ui-select" id="count_font_family">
|
|
</select>
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="字号：" ozh="字號：" en="Size:"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50%" id="count_size" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
|
|
<input type="color" id="counter_color" class="input_color">
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="起始：" ozh="起始：" en="Start:"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50%" id="counter_start" />
|
|
</div>
|
|
<div class="component-line">
|
|
<span class="name" language="m" zh="增量：" ozh="增量：" en="Incremental:"></span>
|
|
<input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="ui-input"
|
|
style="width: 50%" id="counter_add" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="obj_list">
|
|
<div class="component-title" language="m" zh="对象列表" ozh="對象列錶" en="Object List"></div>
|
|
<div class="obj_list">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-left" style="height: 100%">
|
|
<div class="tools-bar left-bar">
|
|
<div class="mode-left">
|
|
<div class="mode-warp">
|
|
<div class="img-warp" id="new">
|
|
<img src="public/images/newfile24.png" language="t" zh="新建模板" ozh="新建模闆"
|
|
en="New template" />
|
|
</div>
|
|
<div class="img-warp" id="open">
|
|
<img src="public/images/open24.png" language="t" zh="打开模板" ozh="打開模闆"
|
|
en="Open Template" />
|
|
</div>
|
|
<div class="img-warp" id="save">
|
|
<img src="public/images/save24.png" language="t" zh="保存模板" ozh="保存模闆"
|
|
en="Save Template" />
|
|
</div>
|
|
<div class="img-warp" id="output">
|
|
<img src="public/images/output24.png" language="t" zh="另存为" ozh="另存為" en="Save as" />
|
|
</div>
|
|
|
|
<div class="line"></div>
|
|
|
|
<div class="img-warp">
|
|
<img src="public/images/previous24.png" id="previous" language="t" zh="撤销" ozh="撤銷"
|
|
en="Revocation" />
|
|
</div>
|
|
<div class="img-warp">
|
|
<img src="public/images/next24.png" id="next" language="t" zh="恢复" ozh="恢復"
|
|
en="Recovery" />
|
|
</div>
|
|
<div class="img-warp">
|
|
<img src="public/images/clean24.png" id="clean" language="t" zh="清空" ozh="清空"
|
|
en="Clear" />
|
|
</div>
|
|
<div class="img-warp">
|
|
<img src="public/images/delete24.png" id="delete" language="t" zh="删除" ozh="刪除"
|
|
en="Delete" />
|
|
</div>
|
|
|
|
|
|
<div class="line"></div>
|
|
|
|
<div class="ui-button ui-button-active img-warp" id="front_side">
|
|
<span language="m" zh="正面" ozh="正面" en="Front"></span>
|
|
</div>
|
|
<div class="ui-button img-warp" id="back_side">
|
|
<span language="m" zh="背面" ozh="背面" en="Back"></span>
|
|
</div>
|
|
<div class="line"></div>
|
|
|
|
<div class="ui-button img-warp" id="version_change">
|
|
<span language="m" zh="切换" ozh="切换" en="Change"></span>
|
|
</div>
|
|
|
|
<div class="line"></div>
|
|
|
|
<div class="img-warp">
|
|
<img src="public/images/about24.png" id="about" language="t" zh="关于我们" ozh="關於我們"
|
|
en="About Us" />
|
|
</div>
|
|
<div class="img-warp">
|
|
<img src="public/images/help24.png" id="help" language="t" zh="帮助文档" ozh="幫助文檔"
|
|
en="Help" />
|
|
</div>
|
|
|
|
<div class="line"></div>
|
|
<select class="ui-select" id="language_select" style="margin-left: 10px">
|
|
<option value='zh'>中文-简体</option>
|
|
<option value='ozh'>中文-繁體</option>
|
|
<option value='en'>English</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="mode3">
|
|
<button type="button" class="layui-btn layui-btn-primary white" id="display" language="m"
|
|
zh="预览效果" ozh="預覽效果" en="Display"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="left">
|
|
<div class="tool" language="t" zh="图片" ozh="圖片" en="Picture">
|
|
<img src="public/images/images.svg" id="addPic" />
|
|
</div>
|
|
<div class="tool" language="t" zh="合成图片" ozh="合成圖片" en="Synthetic Picture">
|
|
<img src="public/images/images_add.svg" id="addOutPic" />
|
|
</div>
|
|
<div class="tool" language="t" zh="文本" ozh="文本" en="Text">
|
|
<img src="public/images/text.svg" id="addText" />
|
|
</div>
|
|
<div class="tool" language="t" zh="合成文本" ozh="合成文本" en="Synthetic Text">
|
|
<img src="public/images/text2.svg" id="addOutText" />
|
|
</div>
|
|
<div class="tool" language="t" zh="方块" ozh="方塊" en="Rect">
|
|
<img src="public/images/rect.svg" id="addRect" />
|
|
</div>
|
|
<div class="tool" language="t" zh="圆形" ozh="圓形" en="Circle">
|
|
<img src="public/images/round.svg" id="addCircle" />
|
|
</div>
|
|
<div class="tool" language="t" zh="直线" ozh="直線" en="Line">
|
|
<img src="public/images/line.svg" id="addLine" />
|
|
</div>
|
|
<div class="tool" language="t" zh="二维码" ozh="二維碼" en="QR Code">
|
|
<img src="public/images/qrcode.svg" id="addQrCode" />
|
|
</div>
|
|
<div class="tool" language="t" zh="条形码" ozh="條形碼" en="Bar Code">
|
|
<img src="public/images/barcode.svg" id="addBarCode" />
|
|
</div>
|
|
<div class="tool" language="t" zh="计数器" ozh="計數器" en="Counter">
|
|
<img src="public/images/counter.svg" id="addCounter" />
|
|
</div>
|
|
</div>
|
|
<div class="right" style="background-color: #1E252D">
|
|
<div style="background-color: #1E252D;" id="canvas-div">
|
|
<canvas id="canvas1"></canvas>
|
|
<canvas id="canvas2"></canvas>
|
|
|
|
</div>
|
|
<div class="footer" style="background-color: #31373D">
|
|
<div id="posText" style="display: inline-block">X : Y : </div>
|
|
<div id="zoomSlide" style="width: 300px;display: none"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 类型改变 -->
|
|
<canvas style="display: none" id="barcode"></canvas>
|
|
<img id="source_front" src="./public/images/front_bg1_2.png" style="display: none" />
|
|
<img id="source_front2" src="./public/images/front_bg2_2.png" style="display: none" />
|
|
<img id="source_back" src="./public/images/back_bg_2.png" style="display: none" />
|
|
</div>
|
|
</div>
|
|
<script src="./public/js/fabric.min.js"></script>
|
|
<script src="./public/js/guideLines.js"></script>
|
|
<script src="./public/js/print.min.js"></script>
|
|
<script src="./public/js/crypto-js.min.js"></script>
|
|
<script src="./public/js/jspdf.umd.min.js"></script>
|
|
<script src="./layui/layui.js"></script>
|
|
<script>
|
|
function desEncrypt(str, key = 'df6a551ca43181fc485f3043bcdd2fbc') {
|
|
var APIFMS
|
|
try {
|
|
var keyHex_encrypt = CryptoJS.enc.Utf8.parse(key)
|
|
var encrypted = CryptoJS.DES.encrypt(str, keyHex_encrypt, {
|
|
mode: CryptoJS.mode.ECB,
|
|
padding: CryptoJS.pad.Pkcs7
|
|
})
|
|
APIFMS = CryptoJS.enc.Base64.stringify(encrypted.ciphertext)
|
|
} catch (err) {
|
|
console.log('des 加密 -------------------------')
|
|
console.log(err)
|
|
}
|
|
return APIFMS
|
|
}
|
|
|
|
const remote = require('@electron/remote')
|
|
var path = require('path');
|
|
const exePath = !remote.app.isPackaged ? process.cwd() : path.dirname(process.execPath)
|
|
const { ipcRenderer } = require('electron')
|
|
const { dialog } = require('@electron/remote')
|
|
var jrQrcode = require('jr-qrcode')
|
|
var JsBarcode = require('jsbarcode')
|
|
ipcRenderer.send('get-sys-fonts')
|
|
ipcRenderer.send('get-scale-rate')
|
|
const { clipboard } = require('electron')
|
|
//var encrypt = new JSEncrypt();
|
|
//encrypt.setPublicKey(`-----BEGIN PUBLIC KEY-----
|
|
//MIGdMA0GCSqGSIb3DQEBAQUAA4GLADCBhwKBgQDAbKQ46WevL9PapJ+AlZqSzczkTovu7STH
|
|
//FmZmIJcNrwPPEWRR2PliUvtS28V+gNMWlu3wNWFAS5KGDbTtndIrP3hnlp9BDIcAcdNuJUM7
|
|
//yJfAYBhtkqvj45Orvdd2RYRxhkQb34uTNXpM+biMH6Wd0wykNb9/VBNM0C12KswEdwIBEQ==
|
|
//-----END PUBLIC KEY-----`);
|
|
layui.use(['layer', 'slider', 'form', 'colorpicker'], function () {
|
|
let myDate = new Date()
|
|
let s_lan = ''
|
|
ipcRenderer.send('get-sys-language')
|
|
/* if(myDate.getFullYear()>2021 && myDate.getMonth() >= 1 && myDate.getDate() > 15){
|
|
|
|
}*/
|
|
function GetFile() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
return params
|
|
}
|
|
function langua_ge(lan = 'zh') {
|
|
$("[language='m']").each(function (i) {
|
|
$(this).html($(this).attr(lan))
|
|
})
|
|
|
|
$("[language='t']").each(function (i) {
|
|
$(this).attr('title', $(this).attr(lan))
|
|
})
|
|
}
|
|
function language_str(str) {
|
|
let t = {
|
|
whetherSave: { zh: '是否保存当前文件？', ozh: '是否保存當前文件？', en: 'Do you want to save the current file?' },
|
|
save: { zh: '保存', ozh: '保存', en: 'Save' },
|
|
noSave: { zh: '不保存', ozh: '不保存', en: 'No saving' },
|
|
cancel: { zh: '取消', ozh: '取消', en: 'Cancel' },
|
|
saveSucc: { zh: '保存成功至', ozh: '保存成功至', en: 'Save successfully to' },
|
|
saveFile: { zh: '保存文件', ozh: '保存文件', en: 'Save file' },
|
|
display: { zh: '预览', ozh: '預覽', en: 'Display' },
|
|
output: { zh: '导出', ozh: '導出', en: 'Export' },
|
|
bg: { zh: '背景', ozh: '背景', en: 'Background' },
|
|
selectPic: { zh: '请选择图片', ozh: '請選擇圖片', en: 'Please select a picture' },
|
|
selectPic: { zh: '请选择文件', ozh: '請選擇文件', en: 'Please select a file' },
|
|
img: { zh: '圖片', ozh: '圖片', en: 'Image' },
|
|
simg: { zh: '合成圖片', ozh: '合成圖片', en: 'Synthesized Image' },
|
|
text: { zh: '文本', ozh: '文本', en: 'Text' },
|
|
stext: { zh: '合成文本', ozh: '合成文本', en: 'Synthesized Text' },
|
|
rect: { zh: '矩形', ozh: '矩形', en: 'Rectangle' },
|
|
circ: { zh: '圓形', ozh: '圓形', en: 'Circle' },
|
|
line: { zh: '直線', ozh: '直線', en: 'Line' },
|
|
qrc: { zh: '二維碼', ozh: '二維碼', en: 'QR code' },
|
|
barc: { zh: '條形碼', ozh: '條形碼', en: 'Barcode' },
|
|
counter: { zh: '計數器', ozh: '计数器', en: 'Counter' },
|
|
about: { zh: '关于Soon Design', ozh: '關於Soon Design', en: 'About Soon Design' },
|
|
vers: { zh: '版本', ozh: '版本', en: 'Version' },
|
|
comf: { zh: '确认', ozh: '確認', en: 'Select' },
|
|
copyright: { zh: '(c) 2022 上海卡树信息科技有限公司 保留所有权利', ozh: '(c) 2022 上海卡樹信息科技有限公司 保留所有權利', en: 'Shanghai Cardsoon Information Technology Co., Ltd.' }
|
|
}
|
|
return t[str][s_lan]
|
|
}
|
|
|
|
var $ = layui.$
|
|
var layer = layui.layer,
|
|
slider = layui.slider,
|
|
colorpicker = layui.colorpicker
|
|
let addState = 0 //0是不添加
|
|
let background_image, background_image1, background_image2
|
|
let bg_version = 1 //front_bg1.png front_bg2.png
|
|
var zoom = 0
|
|
$('#canvas1').attr('height', document.body.clientHeight - 100)
|
|
$('#canvas2').attr('height', document.body.clientHeight - 100)
|
|
$('#object_attribute').css('height', '470px')
|
|
$('#obj_list').css('height', document.body.clientHeight - 520)
|
|
$('.obj_list').css('height', $('#obj_list').height() - 32)
|
|
|
|
$('.main').show()
|
|
$('#canvas1').attr('width', $('#canvas-div').width())
|
|
$('#canvas2').attr('width', $('#canvas-div').width())
|
|
var openAs = {
|
|
_name: '',
|
|
set name(val) {
|
|
if (val == '') {
|
|
$('title').html('Soon Design')
|
|
} else {
|
|
$('title').html('Soon Design - ' + val)
|
|
}
|
|
this._name = val
|
|
},
|
|
get name() {
|
|
return this._name
|
|
}
|
|
} //被打开的文件名
|
|
let objs1 = []
|
|
let objs2 = []
|
|
let step1 = { val: 0 },
|
|
step2 = { val: 0 }
|
|
let step = step1
|
|
let objs = objs1
|
|
let recordJson1 = [],
|
|
recordJson2 = [],
|
|
recordJson = recordJson1,
|
|
recordObjs1 = [],
|
|
recordObjs2 = [],
|
|
recordObjs = recordObjs1
|
|
let pre_objs1 = [],
|
|
pre_objs2 = [],
|
|
next_objs1 = [],
|
|
next_objs2 = [],
|
|
pre_objs = pre_objs1,
|
|
next_objs = next_objs1
|
|
let pre_json1 = [],
|
|
pre_json2 = [],
|
|
next_json1 = [],
|
|
next_json2 = [],
|
|
pre_json = pre_json1,
|
|
next_json = next_json1
|
|
var canvas1 = new fabric.Canvas('canvas1')
|
|
var canvas2 = new fabric.Canvas('canvas2')
|
|
fabric.Object.prototype.objectCaching = false
|
|
var ctx1 = canvas1.getSelectionContext()
|
|
var ctx2 = canvas2.getSelectionContext()
|
|
let is_bgi_add = false
|
|
canvas1.zoomToPoint(new fabric.Point(canvas1.width / 2, canvas1.height / 2), $('#canvas-div').width() / 1200 > 1 ? 1 : $('#canvas-div').width() / 1200)
|
|
//console.log(canvas1.width / 2, canvas1.height / 2);
|
|
//console.log($("#canvas-div").width() / 1200 > 1 ? 1 : $("#canvas-div").width() / 1200);
|
|
canvas2.zoomToPoint(new fabric.Point(canvas2.width / 2, canvas2.height / 2), $('#canvas-div').width() / 1200 > 1 ? 1 : $('#canvas-div').width() / 1200)
|
|
zoom = $('#canvas-div').width() / 1200 > 1 ? 1 : $('#canvas-div').width() / 1200
|
|
$('#source_front').width(zoom * $('#source_front').width())
|
|
$('#source_back').width(zoom * $('#source_back').width())
|
|
$('.canvas-container:eq(1)').hide()
|
|
var canvas = canvas1
|
|
fabric.Object.prototype.set({
|
|
borderColor: '#9013FE',
|
|
cornerColor: '#9013FE', //激活状态角落图标的填充颜色
|
|
cornerStrokeColor: '#9013FE', //激活状态角落图标的边框颜色
|
|
borderOpacityWhenMoving: 1,
|
|
borderScaleFactor: 1,
|
|
cornerSize: 6,
|
|
cornerStyle: 'circle', //rect,circle
|
|
centeredScaling: false, //角落放大缩小是否是以图形中心为放大原点
|
|
centeredRotation: true, //旋转按钮旋转是否是左上角为圆心旋转
|
|
transparentCorners: false, //激活状态角落的图标是否透明
|
|
rotatingPointOffset: 20, //旋转距旋转体的距离
|
|
padding: 0
|
|
})
|
|
canvas1.preserveObjectStacking = true
|
|
canvas2.preserveObjectStacking = true
|
|
|
|
var front_list = []
|
|
ipcRenderer.on('font-list', (event, data) => {
|
|
const newFontList = []
|
|
data.map((item) => {
|
|
if (item.indexOf('"') === 0) {
|
|
newFontList.push(item.replace(/^"|"$/g, ''))
|
|
} else {
|
|
newFontList.push(item)
|
|
}
|
|
})
|
|
front_list = newFontList
|
|
for (let item of front_list) {
|
|
$('#text_font_family').append("<option value='" + item + "'>" + item + '</option>')
|
|
$('#out_text_font_family').append("<option value='" + item + "'>" + item + '</option>')
|
|
$('#barcode_font_family').append("<option value='" + item + "'>" + item + '</option>')
|
|
$('#count_font_family').append("<option value='" + item + "'>" + item + '</option>')
|
|
}
|
|
})
|
|
ipcRenderer.on('sys-lan', (event, data) => {
|
|
let lang = localStorage.getItem('lang')
|
|
if (lang) {
|
|
s_lan = lang
|
|
langua_ge(lang)
|
|
$('#language_select').val(lang)
|
|
return
|
|
}
|
|
switch (data) {
|
|
case 'zh-CN':
|
|
s_lan = 'zh'
|
|
langua_ge('zh')
|
|
$('#language_select').val('zh')
|
|
localStorage.setItem('lang', 'zh')
|
|
break
|
|
case 'zh':
|
|
s_lan = 'zh'
|
|
langua_ge('zh')
|
|
$('#language_select').val('zh')
|
|
localStorage.setItem('lang', 'zh')
|
|
break
|
|
case 'zh-TW':
|
|
s_lan = 'ozh'
|
|
langua_ge('ozh')
|
|
$('#language_select').val('ozh')
|
|
localStorage.setItem('lang', 'ozh')
|
|
break
|
|
case 'en':
|
|
s_lan = 'en'
|
|
langua_ge('en')
|
|
$('#language_select').val('en')
|
|
localStorage.setItem('lang', 'en')
|
|
break
|
|
case 'en-AU':
|
|
s_lan = 'en'
|
|
langua_ge('en')
|
|
$('#language_select').val('en')
|
|
localStorage.setItem('lang', 'en')
|
|
break
|
|
case 'en-CA':
|
|
s_lan = 'en'
|
|
langua_ge('en')
|
|
$('#language_select').val('en')
|
|
localStorage.setItem('lang', 'en')
|
|
break
|
|
case 'en-GB':
|
|
s_lan = 'en'
|
|
langua_ge('en')
|
|
$('#language_select').val('en')
|
|
localStorage.setItem('lang', 'en')
|
|
break
|
|
case 'en-NZ':
|
|
s_lan = 'en'
|
|
langua_ge('en')
|
|
$('#language_select').val('en')
|
|
localStorage.setItem('lang', 'en')
|
|
break
|
|
case 'en-US':
|
|
s_lan = 'en'
|
|
langua_ge('en')
|
|
$('#language_select').val('en')
|
|
localStorage.setItem('lang', 'en')
|
|
break
|
|
case 'en-ZA':
|
|
s_lan = 'en'
|
|
langua_ge('en')
|
|
$('#language_select').val('en')
|
|
localStorage.setItem('lang', 'en')
|
|
break
|
|
}
|
|
})
|
|
ipcRenderer.on('close', (event, message) => {
|
|
layer.confirm(
|
|
'<font style="color:black">' + language_str('whetherSave') + '</font>',
|
|
{
|
|
//是否保存当前文件？
|
|
btn: [language_str('save'), language_str('noSave'), language_str('cancel')], //['保存', '不保存', '取消']
|
|
btn3: function (index, layero) { }
|
|
},
|
|
function (index, layero) {
|
|
output(() => ipcRenderer.send('run-close'))
|
|
return
|
|
let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
|
|
let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
|
|
let _g1 = [],
|
|
_g2 = []
|
|
let left = 0,
|
|
top = 0
|
|
for (let _o of canvas1.getObjects()) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
_g1.push(fabric.util.object.clone(_o))
|
|
}
|
|
let fp = new fabric.Group(_g1).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: top / zoom,
|
|
left: left / zoom
|
|
})
|
|
; (left = 0), (top = 0)
|
|
for (let _o of canvas2.getObjects()) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
_g2.push(fabric.util.object.clone(_o))
|
|
}
|
|
//let fp = new fabric.Group(_g1).toDataURL();
|
|
let bp = new fabric.Group(_g2).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: top / zoom,
|
|
left: left / zoom
|
|
})
|
|
let o = { f: j, b: b, fo: objs1, bo: objs2, fp: fp, bp: bp }
|
|
if (openAs.name != '') {
|
|
//打开的文件
|
|
let fs = require('fs')
|
|
fs.writeFileSync(openAs.name, JSON.stringify(o))
|
|
layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
|
|
saveHistory()
|
|
|
|
ipcRenderer.send('run-close')
|
|
return
|
|
}
|
|
dialog
|
|
.showSaveDialog({
|
|
title: language_str('saveFile'), //'保存文件'
|
|
filters: [{ name: 'Soon File Type', extensions: ['soon'] }]
|
|
})
|
|
.then((result) => {
|
|
if (result.filePath == '') {
|
|
ipcRenderer.send('run-close')
|
|
return
|
|
}
|
|
if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
|
|
result.filePath += '.soon'
|
|
}
|
|
let fs = require('fs')
|
|
o.soonType = 2
|
|
fs.writeFileSync(result.filePath, JSON.stringify(o))
|
|
openAs.name = result.filePath
|
|
layer.msg(language_str('saveSucc') + openAs.name) //保存成功至
|
|
saveHistory()
|
|
ipcRenderer.send('run-close')
|
|
})
|
|
.catch((err) => {
|
|
console.log()
|
|
})
|
|
layer.close(index)
|
|
},
|
|
function (index) {
|
|
ipcRenderer.send('run-close')
|
|
}
|
|
)
|
|
})
|
|
|
|
addBackground() //添加背景 白色卡片
|
|
|
|
initAligningGuidelines(canvas1)
|
|
initAligningGuidelines(canvas2)
|
|
//canvas.setZoom(0.5)
|
|
//recordObjs1.push(JSON.stringify(objs1));
|
|
//recordJson1.push(canvas1.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]));
|
|
//recordObjs2.push(JSON.stringify(objs2));
|
|
//recordJson2.push(canvas2.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]));
|
|
canvas.renderAll() //重新渲染画布
|
|
var zoomSlider = slider.render({
|
|
elem: '#zoomSlide', //绑定元素
|
|
min: 25,
|
|
max: 500,
|
|
value: 100,
|
|
change(val) {
|
|
canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), val / 100)
|
|
zoom = val / 100
|
|
//$(".canvas-container").css("transform","scale(" + val / 100 + ")")
|
|
}
|
|
})
|
|
window.rotate = function (id) {
|
|
let angle = $(`#${id}`).attr('angle') - 0
|
|
angle += 90
|
|
$(`#${id}`).css('transform', `rotate(${angle}deg)`)
|
|
$(`#${id}`).attr('angle', angle)
|
|
}
|
|
$('#display').on('click', function () {
|
|
// 类型改变
|
|
fabric.Image.fromURL('./public/images/front_bg' + bg_version + '_2.png', function (i1) {
|
|
i1.left = background_image.left
|
|
i1.top = background_image.top
|
|
let img1 = i1
|
|
|
|
fabric.Image.fromURL('./public/images/back_bg_2.png', function (i2) {
|
|
i2.left = background_image.left
|
|
i2.top = background_image.top
|
|
let img2 = i2
|
|
fabric.Image.fromURL('./public/images/op_2.png', function (i3) {
|
|
i2.left = background_image.left
|
|
i2.top = background_image.top
|
|
let img3 = i3
|
|
display_func(img1, img2, img3)
|
|
})
|
|
})
|
|
})
|
|
})
|
|
function display_func(img1, img2, img3) {
|
|
$('#base_control').hide()
|
|
$('#line_control').hide()
|
|
$('#pic_control').hide()
|
|
$('#out_pic_control').hide()
|
|
$('#text_control').hide()
|
|
$('#out_text_control').hide()
|
|
$('#rect_control').hide()
|
|
$('#circle_control').hide()
|
|
$('#counter_control').hide()
|
|
$('#qrcode_Controll').hide()
|
|
$('#barcode_controll').hide()
|
|
$('#component_type').text(language_str('bg')) //"背景"
|
|
canvas1.discardActiveObject().renderAll()
|
|
canvas2.discardActiveObject().renderAll()
|
|
let _objs1 = canvas1.getObjects()
|
|
let g1 = []
|
|
let g3 = []
|
|
let g5 = []
|
|
let left = 0 //左裁剪
|
|
let top = 0 //顶裁剪
|
|
let black_left = 0 //黑色左裁剪
|
|
let black_top = 0 //黑色顶裁剪
|
|
let all_left = 0 //预览图左裁剪
|
|
let all_top = 0 //预览图顶裁剪
|
|
for (let item of _objs1) {
|
|
let idx = getIndex(item, canvas1)
|
|
//console.log("------");
|
|
//console.log(item.getCoords());
|
|
//console.log(getCoordsMinX(background_image.getCoords()));
|
|
//console.log(getCoordsMinX(item.getCoords()));
|
|
//console.log(getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()));
|
|
//console.log("------");
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
|
|
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
|
|
all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
g3.push(fabric.util.object.clone(item))
|
|
if (idx != 0 && (objs1[idx - 1].type == 10 || objs1[idx - 1].type == 4)) {
|
|
continue //计数器 或 合成文字
|
|
}
|
|
if (idx != 0 && (objs1[idx - 1].type == 8 || objs1[idx - 1].type == 9)) {
|
|
continue //二维码 条形码
|
|
}
|
|
if (idx != 0 && objs1[idx - 1].type == 2) {
|
|
continue //合成图片
|
|
}
|
|
if (
|
|
idx != 0 &&
|
|
((objs1[idx - 1].type == 3 && (item.get('fill') == '#000000' || (item.get('fill') == '#ffffff' && false))) ||
|
|
//文字 && 黑色
|
|
(objs1[idx - 1].type == 5 && //矩形
|
|
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
|
|
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
|
|
(objs1[idx - 1].type == 6 && //圆形
|
|
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
|
|
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
|
|
(objs1[idx - 1].type == 7 && //直线
|
|
(item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) ||
|
|
objs1[idx - 1].black == true) //勾选并入黑色图层
|
|
// (
|
|
// objs1[idx-1].type == 1//固定图片
|
|
// &&
|
|
// objs1[idx-1].black == true //勾选并入黑色图层
|
|
// )
|
|
) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
|
|
black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
|
|
black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
g5.push(fabric.util.object.clone(item))
|
|
continue //黑色文字 黑色矩形 黑色线条 黑色圆形
|
|
} else if (idx == 0) {
|
|
g5.push(fabric.util.object.clone(item))
|
|
}
|
|
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
|
|
left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
|
|
top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
g1.push(fabric.util.object.clone(item))
|
|
}
|
|
let url1 = new fabric.Group(g1).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: top / zoom,
|
|
left: left / zoom
|
|
})
|
|
|
|
g3.push(img1)
|
|
let url3 = new fabric.Group(g3).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: all_top / zoom,
|
|
left: all_left / zoom
|
|
})
|
|
let url5 = new fabric.Group(g5).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: black_top / zoom,
|
|
left: black_left / zoom
|
|
})
|
|
let _objs2 = canvas2.getObjects()
|
|
let g2 = []
|
|
let g4 = []
|
|
let g6 = []
|
|
left = 0
|
|
top = 0
|
|
black_top = 0
|
|
black_left = 0
|
|
all_top = 0
|
|
all_left = 0
|
|
for (let item of _objs2) {
|
|
let idx = getIndex(item, canvas2)
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
|
|
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
|
|
all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
g4.push(fabric.util.object.clone(item))
|
|
if (idx != 0 && (objs2[idx - 1].type == 10 || objs2[idx - 1].type == 4)) {
|
|
continue //黑色字或计数器 或 合成文字
|
|
}
|
|
if (idx != 0 && (objs2[idx - 1].type == 8 || objs2[idx - 1].type == 9)) {
|
|
continue //二维码 条形码
|
|
}
|
|
if (idx != 0 && objs2[idx - 1].type == 2) {
|
|
continue //合成图片
|
|
}
|
|
if (idx != 0 && objs2[idx - 1].type == 10) {
|
|
continue //合成图片
|
|
}
|
|
if (
|
|
idx != 0 &&
|
|
((objs2[idx - 1].type == 3 && (item.get('fill') == '#000000' || (item.get('fill') == '#ffffff' && false))) ||
|
|
//文字 && 黑色
|
|
(objs2[idx - 1].type == 5 && //矩形
|
|
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
|
|
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
|
|
(objs2[idx - 1].type == 6 && //圆形
|
|
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
|
|
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
|
|
(objs2[idx - 1].type == 7 && //直线
|
|
(item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) ||
|
|
objs2[idx - 1].black == true) //勾选并入黑色图层
|
|
// (
|
|
// objs2[idx-1].type == 1//固定图片
|
|
// &&
|
|
// objs2[idx-1].black == true //勾选并入黑色图层
|
|
// )
|
|
) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
|
|
black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
|
|
black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
g6.push(fabric.util.object.clone(item))
|
|
continue //黑色文字 黑色矩形 黑色线条 黑色圆形
|
|
} else if (idx == 0) {
|
|
g6.push(fabric.util.object.clone(item))
|
|
}
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
|
|
left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
|
|
top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
g2.push(fabric.util.object.clone(item))
|
|
}
|
|
let url2 = new fabric.Group(g2).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: top / zoom,
|
|
left: left / zoom
|
|
})
|
|
let white_url1 = canvas1.getObjects()[0].toDataURL({
|
|
height: 648,
|
|
width: 1012
|
|
})
|
|
g4.push(img2)
|
|
let url4 = new fabric.Group(g4).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: all_top / zoom,
|
|
left: all_left / zoom
|
|
})
|
|
let url6 = new fabric.Group(g6).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: black_top / zoom,
|
|
left: black_left / zoom
|
|
})
|
|
let white_url2 = canvas2.getObjects()[0].toDataURL({
|
|
height: 648,
|
|
width: 1012
|
|
})
|
|
//console.log(canvas.getObjects())
|
|
let w = document.body.clientWidth * 0.7 + 'px'
|
|
let h = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + 150 + 'px'
|
|
let h1 = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + 'px'
|
|
|
|
if ((document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 > document.body.clientHeight) {
|
|
//高度超出，则按高度计算
|
|
h = document.body.clientHeight * 0.8 + 'px'
|
|
h1 = document.body.clientHeight * 0.8 - 150 + 'px'
|
|
w = ((document.body.clientHeight * 0.8 - 150) / 0.62548 + 40) / 0.94
|
|
}
|
|
layer.open({
|
|
type: 1,
|
|
area: [w, h],
|
|
title: language_str('display'), //不显示标题栏"预览"
|
|
shadeClose: true, //点击遮罩关闭
|
|
content: `
|
|
<div style="padding:20px;background-color:#1E252D;height:${h1};display:flex;align-items: center;overflow:hidden;">
|
|
<div style="/*position: relative;top: 50%;transform: translateY(-50%);*/display: flex;justify-content: space-between;">
|
|
<div class="rotate-div" id="displayImg1" angle="0">
|
|
<img src="${url3}" style="width:95%"/>
|
|
<div class="rotate-wrap" onclick="window.rotate('displayImg1')">
|
|
<img src="./public/images/rotate.png" style="height: 64px;width: 64px"/>
|
|
</div>
|
|
</div>
|
|
<div class="rotate-div" id="displayImg2" angle="0">
|
|
<img style="width:95%;/*margin-left:6%*/" src="${url4}"/>
|
|
<div class="rotate-wrap" onclick="window.rotate('displayImg2')">
|
|
<img src="./public/images/rotate.png" style="height: 64px;width: 64px"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>`,
|
|
btn: [language_str('output'), '打印'], //'导出'
|
|
btn1: function (index, layero) {
|
|
let op = { frontColorPic: '', backColorPic: '', frontBlackPic: '', backBlackPic: '', frontData: [], backData: [], flag: 1, frontDisplayPic: url3, backDisplayPic: url4 }
|
|
if ((objs1.length != 0) & (objs2.length == 0)) {
|
|
op.flag = 2
|
|
} else if ((objs1.length == 0) & (objs2.length != 0)) {
|
|
op.flag = 3
|
|
}
|
|
op.frontColorPic = desEncrypt(url1)
|
|
op.backColorPic = desEncrypt(url2)
|
|
//op.frontBlPic = url5;
|
|
//op.backBlPic = url6;
|
|
op.frontBlackPic = desEncrypt(url5)
|
|
op.backBlackPic = desEncrypt(url6)
|
|
for (let item of _objs1) {
|
|
let idx = getIndex(item, canvas1)
|
|
if (idx == 0) continue //background-image
|
|
let type = objs1[idx - 1].type
|
|
if (type == 2) {
|
|
//out_pic
|
|
let xy = getAbsoluteXY(item)
|
|
op.frontData.push({
|
|
type: 1,
|
|
name: objs1[idx - 1].name,
|
|
FontColor: objs1[idx - 1].black ? '#000000' : '@',
|
|
transparency: item.get('opacity'),
|
|
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 3) {
|
|
//text
|
|
if (item.get('fill') == '#000000') {
|
|
//纯黑
|
|
/*
|
|
op.frontData.push({
|
|
"type" : 2,
|
|
"Text" : item.get("text"),
|
|
"FontFamily" : item.get("fontFamily"),
|
|
"FontSize" : parseInt(item.get("fontSize")),
|
|
"FontColor" : "#000000",
|
|
"FontBackgroudColor" : item.get("textBackgroundColor"),
|
|
"Bold" : item.get("fontWeight") == "bold",
|
|
"Underline" : item.get("underline"),
|
|
"Italic" : item.get("fontStyle") == "italic",
|
|
"Strikeout" : item.get("linethrough"),
|
|
"x" : parseInt((item.get("left") - background_image1.left).toFixed(0)),
|
|
"y" : parseInt((item.get("top") - background_image1.top).toFixed(0)),
|
|
"h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate" : parseInt(item.get("angle").toFixed(0))
|
|
});*/
|
|
}
|
|
} else if (type == 4) {
|
|
//out_text
|
|
let xy = getAbsoluteXY(item)
|
|
console.log('out-text: ', item.get('text'), xy)
|
|
console.log(background_image1.left, background_image1.top)
|
|
op.frontData.push({
|
|
type: 3,
|
|
name: objs1[idx - 1].name,
|
|
FontFamily: item.get('fontFamily'),
|
|
DefaultText: item.get('text'),
|
|
FontBackgroudColor: item.get('textBackgroundColor'),
|
|
FontSize: parseInt(item.get('fontSize')),
|
|
FontColor: item.get('fill'),
|
|
Exceed: objs1[idx - 1].exceed,
|
|
AutoWrap: objs1[idx - 1].autoWrap,
|
|
FixSize: objs1[idx - 1].fixSize,
|
|
Bold: item.get('fontWeight') == 'bold',
|
|
Underline: item.get('underline'),
|
|
Italic: item.get('fontStyle') == 'italic',
|
|
Strikeout: item.get('linethrough'),
|
|
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 8) {
|
|
//二维码
|
|
let xy = getAbsoluteXY(item)
|
|
op.frontData.push({
|
|
type: 4,
|
|
name: objs1[idx - 1].name,
|
|
FontColor: objs1[idx - 1].color,
|
|
DefaultText: objs1[idx - 1].val,
|
|
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 9) {
|
|
//条形码
|
|
let xy = getAbsoluteXY(item)
|
|
op.frontData.push({
|
|
type: 5,
|
|
name: objs1[idx - 1].name,
|
|
FontSize: parseInt(objs1[idx - 1].fontSize),
|
|
HideText: objs1[idx - 1].show,
|
|
FontFamily: objs1[idx - 1].font,
|
|
DefaultText: objs1[idx - 1].val,
|
|
FontColor: objs1[idx - 1].color,
|
|
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 10) {
|
|
let xy = getAbsoluteXY(item)
|
|
op.frontData.push({
|
|
type: 6,
|
|
name: objs1[idx - 1].name,
|
|
FontFamily: item.get('fontFamily'),
|
|
FontSize: parseInt(item.get('fontSize')),
|
|
FontColor: item.get('fill'),
|
|
start: objs1[idx - 1].start,
|
|
add: parseInt(objs1[idx - 1].add),
|
|
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
}
|
|
}
|
|
//obj2
|
|
|
|
for (let item of _objs2) {
|
|
let idx = getIndex(item, canvas2)
|
|
if (idx == 0) continue //background-image
|
|
let type = objs2[idx - 1].type
|
|
if (type == 2) {
|
|
//out_pic
|
|
let xy = getAbsoluteXY(item)
|
|
op.backData.push({
|
|
type: 1,
|
|
name: objs2[idx - 1].name,
|
|
FontColor: objs2[idx - 1].black ? '#000000' : '@',
|
|
transparency: item.get('opacity'),
|
|
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 3) {
|
|
//text
|
|
if (item.get('fill') == '#000000') {
|
|
//纯黑
|
|
/*
|
|
op.backData.push({
|
|
"type" : 2,
|
|
"Text" : item.get("text"),
|
|
"FontFamily" : item.get("fontFamily"),
|
|
"FontSize" : parseInt(item.get("fontSize")),
|
|
"FontColor" : "#000000",
|
|
"FontBackgroudColor" : item.get("textBackgroundColor"),
|
|
"Bold" : item.get("fontWeight") == "bold",
|
|
"Underline" : item.get("underline"),
|
|
"Italic" : item.get("fontStyle") == "italic",
|
|
"Strikeout" : item.get("linethrough"),
|
|
"x" : parseInt((item.get("left") - background_image2.left).toFixed(0)),
|
|
"y" : parseInt((item.get("top") - background_image2.top).toFixed(0)),
|
|
"h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate" : parseInt(item.get("angle").toFixed(0))
|
|
});*/
|
|
}
|
|
} else if (type == 4) {
|
|
let xy = getAbsoluteXY(item)
|
|
op.backData.push({
|
|
type: 3,
|
|
name: objs2[idx - 1].name,
|
|
FontFamily: item.get('fontFamily'),
|
|
DefaultText: item.get('text'),
|
|
FontSize: parseInt(item.get('fontSize')),
|
|
FontBackgroudColor: item.get('textBackgroundColor'),
|
|
FontColor: item.get('fill'),
|
|
Exceed: objs2[idx - 1].exceed,
|
|
AutoWrap: objs2[idx - 1].autoWrap,
|
|
FixSize: objs2[idx - 1].fixSize,
|
|
Bold: item.get('fontWeight') == 'bold',
|
|
Underline: item.get('underline'),
|
|
Italic: item.get('fontStyle') == 'italic',
|
|
Strikeout: item.get('linethrough'),
|
|
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 8) {
|
|
//二维码
|
|
let xy = getAbsoluteXY(item)
|
|
op.backData.push({
|
|
type: 4,
|
|
name: objs2[idx - 1].name,
|
|
color: objs2[idx - 1].color,
|
|
DefaultText: objs2[idx - 1].val,
|
|
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 9) {
|
|
let xy = getAbsoluteXY(item)
|
|
op.backData.push({
|
|
type: 5,
|
|
name: objs2[idx - 1].name,
|
|
FontSize: parseInt(objs2[idx - 1].fontSize),
|
|
HideText: objs1[idx - 1].show,
|
|
FontFamily: objs2[idx - 1].font,
|
|
DefaultText: objs1[idx - 1].val,
|
|
color: objs2[idx - 1].color,
|
|
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 10) {
|
|
let xy = getAbsoluteXY(item)
|
|
op.backData.push({
|
|
type: 6,
|
|
name: objs2[idx - 1].name,
|
|
FontFamily: item.get('fontFamily'),
|
|
FontSize: parseInt(item.get('fontSize')),
|
|
FontColor: item.get('fill'),
|
|
start: parseInt(objs2[idx - 1].start),
|
|
add: parseInt(objs2[idx - 1].add),
|
|
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
}
|
|
}
|
|
save(op)
|
|
/*
|
|
dialog.showSaveDialog({
|
|
title:language_str("saveFile"),
|
|
filters: [
|
|
{ name: 'CS File Type', extensions: ['cs'] },
|
|
]
|
|
}).then(result=>{
|
|
if(result.filePath.substring(result.filePath.length-5).indexOf('.') == -1){
|
|
result.filePath += '.cs';
|
|
}
|
|
let fs = require('fs')
|
|
fs.writeFileSync(result.filePath,JSON.stringify(op))
|
|
}).catch(err=>{
|
|
console.log()
|
|
})
|
|
*/
|
|
//return false 开启该代码可禁止点击该按钮关闭
|
|
},
|
|
btn2: function () {
|
|
var pdf = jspdf.jsPDF({
|
|
orientation: 'landscape',
|
|
unit: 'px',
|
|
format: [1012, 648]
|
|
})
|
|
|
|
if ((objs1.length != 0) & (objs2.length == 0)) {
|
|
//只有正面
|
|
let img = new Image()
|
|
img.src = url3
|
|
|
|
pdf.addImage(img, 'JPEG', 0, 0, 1012, 648)
|
|
} else if ((objs1.length == 0) & (objs2.length != 0)) {
|
|
//只有背面
|
|
let img = new Image()
|
|
img.src = url3
|
|
|
|
pdf.addImage(img, 'JPEG', 0, 0, 1012, 648)
|
|
} else {
|
|
let img = new Image()
|
|
img.src = url3
|
|
|
|
pdf.addImage(img, 'JPEG', 0, 0, 1012, 648)
|
|
|
|
pdf.addPage()
|
|
let img2 = new Image()
|
|
img2.src = url4
|
|
pdf.addImage(img2, 'JPEG', 0, 0, 1012, 648)
|
|
}
|
|
|
|
var pdfDataUri = pdf.output('datauristring').replace('data:application/pdf;filename=generated.pdf;base64,', '')
|
|
|
|
// 使用 printJS 打印 PDF
|
|
//ipcRenderer.send('print-pdf', pdfDataUri);
|
|
//return;
|
|
// var pdfDataUrl = pdf.output('dataurlstring').replace("data:application/pdf;filename=generated.pdf;base64,", "");
|
|
// console.log(pdfDataUrl)
|
|
// 使用printJS打印PDF
|
|
// printJS({
|
|
// printable: pdfDataUrl,
|
|
// type: 'pdf',
|
|
// base64: true
|
|
// });
|
|
printJS({ printable: pdfDataUri, type: 'pdf', base64: true })
|
|
}
|
|
})
|
|
}
|
|
function output(callback = null, _save = save) {
|
|
// 类型改变
|
|
fabric.Image.fromURL('./public/images/op_2.png', function (i1) {
|
|
i1.left = background_image.left
|
|
i1.top = background_image.top
|
|
let img1 = i1
|
|
fabric.Image.fromURL('./public/images/op_2.png', function (i2) {
|
|
i2.left = background_image.left
|
|
i2.top = background_image.top
|
|
let img2 = i2
|
|
|
|
$('#base_control').hide()
|
|
$('#line_control').hide()
|
|
$('#pic_control').hide()
|
|
$('#out_pic_control').hide()
|
|
$('#text_control').hide()
|
|
$('#out_text_control').hide()
|
|
$('#rect_control').hide()
|
|
$('#circle_control').hide()
|
|
$('#counter_control').hide()
|
|
$('#qrcode_Controll').hide()
|
|
$('#barcode_controll').hide()
|
|
$('#component_type').text(language_str('bg')) //"背景"
|
|
canvas1.discardActiveObject().renderAll()
|
|
canvas2.discardActiveObject().renderAll()
|
|
let _objs1 = canvas1.getObjects()
|
|
let g1 = []
|
|
let g3 = []
|
|
let g5 = [] //黑色图层
|
|
let left = 0 //左裁剪
|
|
let top = 0 //顶裁剪
|
|
let black_left = 0 //黑色左裁剪
|
|
let black_top = 0 //黑色顶裁剪
|
|
let all_left = 0 //预览图左裁剪
|
|
let all_top = 0 //预览图顶裁剪
|
|
for (let item of _objs1) {
|
|
let idx = getIndex(item, canvas1)
|
|
//console.log("------");
|
|
//console.log(item.getCoords());
|
|
//console.log(getCoordsMinX(background_image.getCoords()));
|
|
//console.log(getCoordsMinX(item.getCoords()));
|
|
//console.log(getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()));
|
|
//console.log("------");
|
|
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
|
|
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
|
|
all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
g3.push(fabric.util.object.clone(item))
|
|
if (idx != 0 && (objs1[idx - 1].type == 10 || objs1[idx - 1].type == 4)) {
|
|
continue //计数器 或 合成文字
|
|
}
|
|
if (idx != 0 && (objs1[idx - 1].type == 8 || objs1[idx - 1].type == 9)) {
|
|
continue //二维码 条形码
|
|
}
|
|
if (idx != 0 && objs1[idx - 1].type == 2) {
|
|
continue //合成图片
|
|
}
|
|
if (
|
|
idx != 0 &&
|
|
((objs1[idx - 1].type == 3 && item.get('fill') == '#000000') ||
|
|
//文字 && 黑色
|
|
(objs1[idx - 1].type == 5 && //矩形
|
|
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
|
|
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
|
|
(objs1[idx - 1].type == 6 && //圆形
|
|
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
|
|
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
|
|
(objs1[idx - 1].type == 7 && //直线
|
|
(item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) ||
|
|
objs1[idx - 1].black == true) //勾选并入黑色图层
|
|
// ||
|
|
// (
|
|
// objs1[idx-1].type == 1//固定图片
|
|
// &&
|
|
// objs1[idx-1].black == true //勾选并入黑色图层
|
|
// )
|
|
) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
|
|
black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
|
|
black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
g5.push(fabric.util.object.clone(item))
|
|
continue //黑色文字 黑色矩形 黑色线条 黑色圆形
|
|
} else if (idx == 0) {
|
|
g5.push(fabric.util.object.clone(item))
|
|
}
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
|
|
left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
|
|
top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
g1.push(fabric.util.object.clone(item))
|
|
}
|
|
let url1 = new fabric.Group(g1).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: top / zoom,
|
|
left: left / zoom
|
|
})
|
|
g3.push(img1)
|
|
let url3 = new fabric.Group(g3).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: all_top / zoom,
|
|
left: all_left / zoom
|
|
})
|
|
let url5 = new fabric.Group(g5).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: black_top / zoom,
|
|
left: black_left / zoom
|
|
})
|
|
let _objs2 = canvas2.getObjects()
|
|
let g2 = []
|
|
let g4 = []
|
|
let g6 = [] //黑色图层
|
|
left = 0
|
|
top = 0
|
|
black_left = 0 //黑色左裁剪
|
|
black_top = 0 //黑色顶裁剪
|
|
all_left = 0 //黑色左裁剪
|
|
all_top = 0 //黑色顶裁剪
|
|
for (let item of _objs2) {
|
|
let idx = getIndex(item, canvas2)
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
|
|
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
|
|
all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
g4.push(fabric.util.object.clone(item))
|
|
if (idx != 0 && (objs2[idx - 1].type == 10 || objs2[idx - 1].type == 4)) {
|
|
continue //计数器 或 合成文字
|
|
}
|
|
if (idx != 0 && (objs2[idx - 1].type == 8 || objs2[idx - 1].type == 9)) {
|
|
continue //二维码 条形码
|
|
}
|
|
if (idx != 0 && objs2[idx - 1].type == 2) {
|
|
continue //合成图片
|
|
}
|
|
if (
|
|
idx != 0 &&
|
|
((objs2[idx - 1].type == 3 && (item.get('fill') == '#000000' || (item.get('fill') == '#ffffff' && false))) ||
|
|
//文字 && 黑色
|
|
(objs2[idx - 1].type == 5 && //矩形
|
|
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
|
|
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
|
|
(objs2[idx - 1].type == 6 && //圆形
|
|
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
|
|
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
|
|
(objs2[idx - 1].type == 7 && //直线
|
|
(item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) ||
|
|
objs2[idx - 1].black == true) //勾选并入黑色图层
|
|
// (
|
|
// objs2[idx-1].type == 1//固定图片
|
|
// &&
|
|
// objs2[idx-1].black == true //勾选并入黑色图层
|
|
// )
|
|
) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
|
|
black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
|
|
black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
g6.push(fabric.util.object.clone(item))
|
|
continue //黑色文字 黑色矩形 黑色线条 黑色圆形
|
|
} else if (idx == 0) {
|
|
g6.push(fabric.util.object.clone(item))
|
|
}
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
|
|
left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
|
|
top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
g2.push(fabric.util.object.clone(item))
|
|
}
|
|
let url2 = new fabric.Group(g2).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: top / zoom,
|
|
left: left / zoom
|
|
})
|
|
let white_url1 = canvas1.getObjects()[0].toDataURL({
|
|
height: 648,
|
|
width: 1012
|
|
})
|
|
g4.push(img2)
|
|
let url4 = new fabric.Group(g4).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: all_top / zoom,
|
|
left: all_left / zoom
|
|
})
|
|
let url6 = new fabric.Group(g6).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: black_top / zoom,
|
|
left: black_left / zoom
|
|
})
|
|
let white_url2 = canvas2.getObjects()[0].toDataURL({
|
|
height: 648,
|
|
width: 1012
|
|
})
|
|
//console.log(canvas.getObjects())
|
|
let w = document.body.clientWidth * 0.7 + 'px'
|
|
let h = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + 150 + 'px'
|
|
let h1 = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + 'px'
|
|
|
|
if ((document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 > document.body.clientHeight) {
|
|
//高度超出，则按高度计算
|
|
h = document.body.clientHeight * 0.8 + 'px'
|
|
h1 = document.body.clientHeight * 0.8 - 150 + 'px'
|
|
w = ((document.body.clientHeight * 0.8 - 150) / 0.62548 + 40) / 0.94
|
|
}
|
|
|
|
let op = { frontColorPic: '', backColorPic: '', frontBlackPic: '', backBlackPic: '', frontData: [], backData: [], flag: 1, frontDisplayPic: url3, backDisplayPic: url4 }
|
|
if ((objs1.length != 0) & (objs2.length == 0)) {
|
|
op.flag = 2
|
|
} else if ((objs1.length == 0) & (objs2.length != 0)) {
|
|
op.flag = 3
|
|
}
|
|
op.frontColorPic = desEncrypt(url1)
|
|
op.backColorPic = desEncrypt(url2)
|
|
//op.frontBlPic = url5;
|
|
//op.backBlPic = url6;
|
|
op.frontBlackPic = desEncrypt(url5)
|
|
op.backBlackPic = desEncrypt(url6)
|
|
for (let item of _objs1) {
|
|
let idx = getIndex(item, canvas1)
|
|
if (idx == 0) continue //background-image
|
|
let type = objs1[idx - 1].type
|
|
if (type == 2) {
|
|
//out_pic
|
|
let xy = getAbsoluteXY(item)
|
|
op.frontData.push({
|
|
type: 1,
|
|
name: objs1[idx - 1].name,
|
|
FontColor: objs1[idx - 1].black ? '#000000' : '@',
|
|
transparency: item.get('opacity'),
|
|
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 3) {
|
|
//text
|
|
/*2022-07-26 黑色并入黑色图层
|
|
if(item.get("fill") == "#000000"){
|
|
//纯黑
|
|
op.frontData.push({
|
|
"type" : 2,
|
|
"Text" : item.get("text"),
|
|
"FontFamily" : item.get("fontFamily"),
|
|
"FontSize" : parseInt(item.get("fontSize")),
|
|
"FontColor" : "#000000",
|
|
"FontBackgroudColor" : item.get("textBackgroundColor"),
|
|
"Bold" : item.get("fontWeight") == "bold",
|
|
"Underline" : item.get("underline"),
|
|
"Italic" : item.get("fontStyle") == "italic",
|
|
"Strikeout" : item.get("linethrough"),
|
|
"x" : parseInt((item.get("left") - background_image1.left).toFixed(0)),
|
|
"y" : parseInt((item.get("top") - background_image1.top).toFixed(0)),
|
|
"h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate" : parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
}
|
|
*/
|
|
} else if (type == 4) {
|
|
//out_text
|
|
let xy = getAbsoluteXY(item)
|
|
op.frontData.push({
|
|
type: 3,
|
|
name: objs1[idx - 1].name,
|
|
FontFamily: item.get('fontFamily'),
|
|
DefaultText: item.get('text'),
|
|
FontBackgroudColor: item.get('textBackgroundColor'),
|
|
FontSize: parseInt(item.get('fontSize')),
|
|
FontColor: item.get('fill'),
|
|
Exceed: objs1[idx - 1].exceed,
|
|
AutoWrap: objs1[idx - 1].autoWrap,
|
|
FixSize: objs1[idx - 1].fixSize,
|
|
Bold: item.get('fontWeight') == 'bold',
|
|
Underline: item.get('underline'),
|
|
Italic: item.get('fontStyle') == 'italic',
|
|
Strikeout: item.get('linethrough'),
|
|
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 8) {
|
|
//二维码
|
|
let xy = getAbsoluteXY(item)
|
|
op.frontData.push({
|
|
type: 4,
|
|
name: objs1[idx - 1].name,
|
|
FontColor: objs1[idx - 1].color,
|
|
DefaultText: objs1[idx - 1].val,
|
|
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 9) {
|
|
//条形码
|
|
let xy = getAbsoluteXY(item)
|
|
op.frontData.push({
|
|
type: 5,
|
|
name: objs1[idx - 1].name,
|
|
FontSize: parseInt(objs1[idx - 1].fontSize),
|
|
DefaultText: objs1[idx - 1].val,
|
|
HideText: objs1[idx - 1].show,
|
|
FontFamily: objs1[idx - 1].font,
|
|
FontColor: objs1[idx - 1].color,
|
|
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 10) {
|
|
let xy = getAbsoluteXY(item)
|
|
op.frontData.push({
|
|
type: 6,
|
|
name: objs1[idx - 1].name,
|
|
FontFamily: item.get('fontFamily'),
|
|
FontSize: parseInt(item.get('fontSize')),
|
|
FontColor: item.get('fill'),
|
|
start: objs1[idx - 1].start,
|
|
add: parseInt(objs1[idx - 1].add),
|
|
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
}
|
|
}
|
|
//obj2
|
|
for (let item of _objs2) {
|
|
let idx = getIndex(item, canvas2)
|
|
if (idx == 0) continue //background-image
|
|
let type = objs2[idx - 1].type
|
|
if (type == 2) {
|
|
//out_pic
|
|
let xy = getAbsoluteXY(item)
|
|
op.backData.push({
|
|
type: 1,
|
|
name: objs2[idx - 1].name,
|
|
FontColor: objs2[idx - 1].black ? '#000000' : '@',
|
|
transparency: item.get('opacity'),
|
|
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 3) {
|
|
//text
|
|
/*2022-07-26 黑色并入黑色图层
|
|
if(item.get("fill") == "#000000"){
|
|
//纯黑
|
|
op.backData.push({
|
|
"type" : 2,
|
|
"Text" : item.get("text"),
|
|
"FontFamily" : item.get("fontFamily"),
|
|
"FontSize" : parseInt(item.get("fontSize")),
|
|
"FontColor" : "#000000",
|
|
"FontBackgroudColor" : item.get("textBackgroundColor"),
|
|
"Bold" : item.get("fontWeight") == "bold",
|
|
"Underline" : item.get("underline"),
|
|
"Italic" : item.get("fontStyle") == "italic",
|
|
"Strikeout" : item.get("linethrough"),
|
|
"x" : parseInt((item.get("left") - background_image2.left).toFixed(0)),
|
|
"y" : parseInt((item.get("top") - background_image2.top).toFixed(0)),
|
|
"h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate" : parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
}
|
|
*/
|
|
} else if (type == 4) {
|
|
let xy = getAbsoluteXY(item)
|
|
op.backData.push({
|
|
type: 3,
|
|
name: objs2[idx - 1].name,
|
|
FontFamily: item.get('fontFamily'),
|
|
DefaultText: item.get('text'),
|
|
FontSize: parseInt(item.get('fontSize')),
|
|
FontBackgroudColor: item.get('textBackgroundColor'),
|
|
FontColor: item.get('fill'),
|
|
Exceed: objs2[idx - 1].exceed,
|
|
AutoWrap: objs2[idx - 1].autoWrap,
|
|
FixSize: objs2[idx - 1].fixSize,
|
|
Bold: item.get('fontWeight') == 'bold',
|
|
Underline: item.get('underline'),
|
|
Italic: item.get('fontStyle') == 'italic',
|
|
Strikeout: item.get('linethrough'),
|
|
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 8) {
|
|
//二维码
|
|
let xy = getAbsoluteXY(item)
|
|
op.backData.push({
|
|
type: 4,
|
|
name: objs2[idx - 1].name,
|
|
FontColor: objs2[idx - 1].color,
|
|
DefaultText: objs2[idx - 1].val,
|
|
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 9) {
|
|
let xy = getAbsoluteXY(item)
|
|
op.backData.push({
|
|
type: 5,
|
|
name: objs2[idx - 1].name,
|
|
DefaultText: objs2[idx - 1].val,
|
|
HideText: objs1[idx - 1].show,
|
|
FontSize: parseInt(objs2[idx - 1].fontSize),
|
|
FontFamily: objs2[idx - 1].font,
|
|
FontColor: objs2[idx - 1].color,
|
|
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 10) {
|
|
let xy = getAbsoluteXY(item)
|
|
op.backData.push({
|
|
type: 6,
|
|
name: objs2[idx - 1].name,
|
|
FontFamily: item.get('fontFamily'),
|
|
FontSize: parseInt(item.get('fontSize')),
|
|
FontColor: item.get('fill'),
|
|
start: parseInt(objs2[idx - 1].start),
|
|
add: parseInt(objs2[idx - 1].add),
|
|
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
}
|
|
}
|
|
_save(op, callback)
|
|
//return false 开启该代码可禁止点击该按钮关闭
|
|
})
|
|
})
|
|
}
|
|
$('#output').on('click', function () {
|
|
output(null, saveAs)
|
|
return
|
|
// 类型改变
|
|
fabric.Image.fromURL('./public/images/op_2.png', function (i1) {
|
|
i1.left = background_image.left
|
|
i1.top = background_image.top
|
|
let img1 = i1
|
|
fabric.Image.fromURL('./public/images/op_2.png', function (i2) {
|
|
i2.left = background_image.left
|
|
i2.top = background_image.top
|
|
let img2 = i2
|
|
|
|
$('#base_control').hide()
|
|
$('#line_control').hide()
|
|
$('#pic_control').hide()
|
|
$('#out_pic_control').hide()
|
|
$('#text_control').hide()
|
|
$('#out_text_control').hide()
|
|
$('#rect_control').hide()
|
|
$('#circle_control').hide()
|
|
$('#counter_control').hide()
|
|
$('#qrcode_Controll').hide()
|
|
$('#barcode_controll').hide()
|
|
$('#component_type').text(language_str('bg')) //"背景"
|
|
canvas1.discardActiveObject().renderAll()
|
|
canvas2.discardActiveObject().renderAll()
|
|
let _objs1 = canvas1.getObjects()
|
|
let g1 = []
|
|
let g3 = []
|
|
let g5 = [] //黑色图层
|
|
let left = 0 //左裁剪
|
|
let top = 0 //顶裁剪
|
|
let black_left = 0 //黑色左裁剪
|
|
let black_top = 0 //黑色顶裁剪
|
|
let all_left = 0 //预览图左裁剪
|
|
let all_top = 0 //预览图顶裁剪
|
|
for (let item of _objs1) {
|
|
let idx = getIndex(item, canvas1)
|
|
//console.log("------");
|
|
//console.log(item.getCoords());
|
|
//console.log(getCoordsMinX(background_image.getCoords()));
|
|
//console.log(getCoordsMinX(item.getCoords()));
|
|
//console.log(getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()));
|
|
//console.log("------");
|
|
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
|
|
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
|
|
all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
g3.push(fabric.util.object.clone(item))
|
|
if (idx != 0 && (objs1[idx - 1].type == 10 || objs1[idx - 1].type == 4)) {
|
|
continue //计数器 或 合成文字
|
|
}
|
|
if (idx != 0 && (objs1[idx - 1].type == 8 || objs1[idx - 1].type == 9)) {
|
|
continue //二维码 条形码
|
|
}
|
|
if (idx != 0 && objs1[idx - 1].type == 2) {
|
|
continue //合成图片
|
|
}
|
|
if (
|
|
idx != 0 &&
|
|
((objs1[idx - 1].type == 3 && (item.get('fill') == '#000000' || (item.get('fill') == '#ffffff' && false))) ||
|
|
//文字 && 黑色
|
|
(objs1[idx - 1].type == 5 && //矩形
|
|
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
|
|
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
|
|
(objs1[idx - 1].type == 6 && //圆形
|
|
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
|
|
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
|
|
(objs1[idx - 1].type == 7 && //直线
|
|
(item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) ||
|
|
objs1[idx - 1].black == true) //勾选并入黑色图层
|
|
// (
|
|
// objs1[idx-1].type == 1//固定图片
|
|
// &&
|
|
// objs1[idx-1].black == true //勾选并入黑色图层
|
|
// )
|
|
) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
|
|
black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
|
|
black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
g5.push(fabric.util.object.clone(item))
|
|
continue //黑色文字 黑色矩形 黑色线条 黑色圆形
|
|
} else if (idx == 0) {
|
|
g5.push(fabric.util.object.clone(item))
|
|
}
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
|
|
left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
|
|
top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
g1.push(fabric.util.object.clone(item))
|
|
}
|
|
let url1 = new fabric.Group(g1).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: top / zoom,
|
|
left: left / zoom
|
|
})
|
|
g3.push(img1)
|
|
let url3 = new fabric.Group(g3).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: all_top / zoom,
|
|
left: all_left / zoom
|
|
})
|
|
let url5 = new fabric.Group(g5).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: black_top / zoom,
|
|
left: black_left / zoom
|
|
})
|
|
let _objs2 = canvas2.getObjects()
|
|
let g2 = []
|
|
let g4 = []
|
|
let g6 = [] //黑色图层
|
|
left = 0
|
|
top = 0
|
|
black_left = 0 //黑色左裁剪
|
|
black_top = 0 //黑色顶裁剪
|
|
all_left = 0 //黑色左裁剪
|
|
all_top = 0 //黑色顶裁剪
|
|
for (let item of _objs2) {
|
|
let idx = getIndex(item, canvas2)
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
|
|
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
|
|
all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
g4.push(fabric.util.object.clone(item))
|
|
if (idx != 0 && (objs2[idx - 1].type == 10 || objs2[idx - 1].type == 4)) {
|
|
continue //计数器 或 合成文字
|
|
}
|
|
if (idx != 0 && (objs2[idx - 1].type == 8 || objs2[idx - 1].type == 9)) {
|
|
continue //二维码 条形码
|
|
}
|
|
if (idx != 0 && objs2[idx - 1].type == 2) {
|
|
continue //合成图片
|
|
}
|
|
if (
|
|
idx != 0 &&
|
|
((objs2[idx - 1].type == 3 && (item.get('fill') == '#000000' || (item.get('fill') == '#ffffff' && false))) ||
|
|
//文字 && 黑色
|
|
(objs2[idx - 1].type == 5 && //矩形
|
|
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
|
|
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
|
|
(objs2[idx - 1].type == 6 && //圆形
|
|
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
|
|
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
|
|
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
|
|
(objs2[idx - 1].type == 7 && //直线
|
|
(item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) ||
|
|
objs2[idx - 1].black == true) //勾选并入黑色图层
|
|
// (
|
|
// objs2[idx-1].type == 1//固定图片
|
|
// &&
|
|
// objs2[idx-1].black == true //勾选并入黑色图层
|
|
// )
|
|
) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
|
|
black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
|
|
black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
g6.push(fabric.util.object.clone(item))
|
|
continue //黑色文字 黑色矩形 黑色线条 黑色圆形
|
|
} else if (idx == 0) {
|
|
g6.push(fabric.util.object.clone(item))
|
|
}
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
|
|
left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
|
|
top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
g2.push(fabric.util.object.clone(item))
|
|
}
|
|
let url2 = new fabric.Group(g2).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: top / zoom,
|
|
left: left / zoom
|
|
})
|
|
let white_url1 = canvas1.getObjects()[0].toDataURL({
|
|
height: 648,
|
|
width: 1012
|
|
})
|
|
g4.push(img2)
|
|
let url4 = new fabric.Group(g4).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: all_top / zoom,
|
|
left: all_left / zoom
|
|
})
|
|
let url6 = new fabric.Group(g6).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: black_top / zoom,
|
|
left: black_left / zoom
|
|
})
|
|
let white_url2 = canvas2.getObjects()[0].toDataURL({
|
|
height: 648,
|
|
width: 1012
|
|
})
|
|
//console.log(canvas.getObjects())
|
|
let w = document.body.clientWidth * 0.7 + 'px'
|
|
let h = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + 150 + 'px'
|
|
let h1 = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + 'px'
|
|
|
|
if ((document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 > document.body.clientHeight) {
|
|
//高度超出，则按高度计算
|
|
h = document.body.clientHeight * 0.8 + 'px'
|
|
h1 = document.body.clientHeight * 0.8 - 150 + 'px'
|
|
w = ((document.body.clientHeight * 0.8 - 150) / 0.62548 + 40) / 0.94
|
|
}
|
|
|
|
let op = { frontColorPic: '', backColorPic: '', frontBlackPic: '', backBlackPic: '', frontData: [], backData: [], flag: 1, frontDisplayPic: url3, backDisplayPic: url4 }
|
|
if ((objs1.length != 0) & (objs2.length == 0)) {
|
|
op.flag = 2
|
|
} else if ((objs1.length == 0) & (objs2.length != 0)) {
|
|
op.flag = 3
|
|
}
|
|
op.frontColorPic = desEncrypt(url1)
|
|
op.backColorPic = desEncrypt(url2)
|
|
//op.frontBlPic = url5;
|
|
//op.backBlPic = url6;
|
|
op.frontBlackPic = desEncrypt(url5)
|
|
op.backBlackPic = desEncrypt(url6)
|
|
for (let item of _objs1) {
|
|
let idx = getIndex(item, canvas1)
|
|
if (idx == 0) continue //background-image
|
|
let type = objs1[idx - 1].type
|
|
if (type == 2) {
|
|
//out_pic
|
|
let xy = getAbsoluteXY(item)
|
|
op.frontData.push({
|
|
type: 1,
|
|
name: objs1[idx - 1].name,
|
|
FontColor: objs1[idx - 1].black ? '#000000' : '@',
|
|
transparency: item.get('opacity'),
|
|
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 3) {
|
|
//text
|
|
/*2022-07-26 黑色并入黑色图层
|
|
if(item.get("fill") == "#000000"){
|
|
//纯黑
|
|
op.frontData.push({
|
|
"type" : 2,
|
|
"Text" : item.get("text"),
|
|
"FontFamily" : item.get("fontFamily"),
|
|
"FontSize" : parseInt(item.get("fontSize")),
|
|
"FontColor" : "#000000",
|
|
"FontBackgroudColor" : item.get("textBackgroundColor"),
|
|
"Bold" : item.get("fontWeight") == "bold",
|
|
"Underline" : item.get("underline"),
|
|
"Italic" : item.get("fontStyle") == "italic",
|
|
"Strikeout" : item.get("linethrough"),
|
|
"x" : parseInt((item.get("left") - background_image1.left).toFixed(0)),
|
|
"y" : parseInt((item.get("top") - background_image1.top).toFixed(0)),
|
|
"h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate" : parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
}
|
|
*/
|
|
} else if (type == 4) {
|
|
//out_text
|
|
let xy = getAbsoluteXY(item)
|
|
op.frontData.push({
|
|
type: 3,
|
|
name: objs1[idx - 1].name,
|
|
FontFamily: item.get('fontFamily'),
|
|
DefaultText: item.get('text'),
|
|
FontBackgroudColor: item.get('textBackgroundColor'),
|
|
FontSize: parseInt(item.get('fontSize')),
|
|
FontColor: item.get('fill'),
|
|
Exceed: objs1[idx - 1].exceed,
|
|
AutoWrap: objs1[idx - 1].autoWrap,
|
|
FixSize: objs1[idx - 1].fixSize,
|
|
Bold: item.get('fontWeight') == 'bold',
|
|
Underline: item.get('underline'),
|
|
Italic: item.get('fontStyle') == 'italic',
|
|
Strikeout: item.get('linethrough'),
|
|
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 8) {
|
|
//二维码
|
|
let xy = getAbsoluteXY(item)
|
|
op.frontData.push({
|
|
type: 4,
|
|
name: objs1[idx - 1].name,
|
|
FontColor: objs1[idx - 1].color,
|
|
DefaultText: objs1[idx - 1].val,
|
|
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 9) {
|
|
//条形码
|
|
let xy = getAbsoluteXY(item)
|
|
op.frontData.push({
|
|
type: 5,
|
|
name: objs1[idx - 1].name,
|
|
FontSize: parseInt(objs1[idx - 1].fontSize),
|
|
DefaultText: objs1[idx - 1].val,
|
|
HideText: objs1[idx - 1].show,
|
|
FontFamily: objs1[idx - 1].font,
|
|
FontColor: objs1[idx - 1].color,
|
|
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 10) {
|
|
let xy = getAbsoluteXY(item)
|
|
op.frontData.push({
|
|
type: 6,
|
|
name: objs1[idx - 1].name,
|
|
FontFamily: item.get('fontFamily'),
|
|
FontSize: parseInt(item.get('fontSize')),
|
|
FontColor: item.get('fill'),
|
|
start: objs1[idx - 1].start,
|
|
add: parseInt(objs1[idx - 1].add),
|
|
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image1.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
}
|
|
}
|
|
//obj2
|
|
for (let item of _objs2) {
|
|
let idx = getIndex(item, canvas2)
|
|
if (idx == 0) continue //background-image
|
|
let type = objs2[idx - 1].type
|
|
if (type == 2) {
|
|
//out_pic
|
|
let xy = getAbsoluteXY(item)
|
|
op.backData.push({
|
|
type: 1,
|
|
name: objs2[idx - 1].name,
|
|
FontColor: objs2[idx - 1].black ? '#000000' : '@',
|
|
transparency: item.get('opacity'),
|
|
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 3) {
|
|
//text
|
|
/*2022-07-26 黑色并入黑色图层
|
|
if(item.get("fill") == "#000000"){
|
|
//纯黑
|
|
op.backData.push({
|
|
"type" : 2,
|
|
"Text" : item.get("text"),
|
|
"FontFamily" : item.get("fontFamily"),
|
|
"FontSize" : parseInt(item.get("fontSize")),
|
|
"FontColor" : "#000000",
|
|
"FontBackgroudColor" : item.get("textBackgroundColor"),
|
|
"Bold" : item.get("fontWeight") == "bold",
|
|
"Underline" : item.get("underline"),
|
|
"Italic" : item.get("fontStyle") == "italic",
|
|
"Strikeout" : item.get("linethrough"),
|
|
"x" : parseInt((item.get("left") - background_image2.left).toFixed(0)),
|
|
"y" : parseInt((item.get("top") - background_image2.top).toFixed(0)),
|
|
"h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
|
|
"w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
|
|
"rotate" : parseInt(item.get("angle").toFixed(0))
|
|
});
|
|
}
|
|
*/
|
|
} else if (type == 4) {
|
|
let xy = getAbsoluteXY(item)
|
|
op.backData.push({
|
|
type: 3,
|
|
name: objs2[idx - 1].name,
|
|
FontFamily: item.get('fontFamily'),
|
|
DefaultText: item.get('text'),
|
|
FontSize: parseInt(item.get('fontSize')),
|
|
FontBackgroudColor: item.get('textBackgroundColor'),
|
|
FontColor: item.get('fill'),
|
|
Exceed: objs2[idx - 1].exceed,
|
|
AutoWrap: objs2[idx - 1].autoWrap,
|
|
FixSize: objs2[idx - 1].fixSize,
|
|
Bold: item.get('fontWeight') == 'bold',
|
|
Underline: item.get('underline'),
|
|
Italic: item.get('fontStyle') == 'italic',
|
|
Strikeout: item.get('linethrough'),
|
|
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 8) {
|
|
//二维码
|
|
let xy = getAbsoluteXY(item)
|
|
op.backData.push({
|
|
type: 4,
|
|
name: objs2[idx - 1].name,
|
|
FontColor: objs2[idx - 1].color,
|
|
DefaultText: objs2[idx - 1].val,
|
|
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 9) {
|
|
let xy = getAbsoluteXY(item)
|
|
op.backData.push({
|
|
type: 5,
|
|
name: objs2[idx - 1].name,
|
|
DefaultText: objs2[idx - 1].val,
|
|
HideText: objs1[idx - 1].show,
|
|
FontSize: parseInt(objs2[idx - 1].fontSize),
|
|
FontFamily: objs2[idx - 1].font,
|
|
FontColor: objs2[idx - 1].color,
|
|
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
} else if (type == 10) {
|
|
let xy = getAbsoluteXY(item)
|
|
op.backData.push({
|
|
type: 6,
|
|
name: objs2[idx - 1].name,
|
|
FontFamily: item.get('fontFamily'),
|
|
FontSize: parseInt(item.get('fontSize')),
|
|
FontColor: item.get('fill'),
|
|
start: parseInt(objs2[idx - 1].start),
|
|
add: parseInt(objs2[idx - 1].add),
|
|
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
|
|
y: parseInt((xy[1] - background_image2.top).toFixed(0)),
|
|
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
|
|
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
|
|
rotate: parseInt(item.get('angle').toFixed(0))
|
|
})
|
|
}
|
|
}
|
|
dialog
|
|
.showSaveDialog({
|
|
title: language_str('saveFile'), //'保存文件'
|
|
filters: [{ name: 'CS File Type', extensions: ['cs'] }]
|
|
})
|
|
.then((result) => {
|
|
if (result.canceled) return
|
|
if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
|
|
result.filePath += '.cs'
|
|
}
|
|
let fs = require('fs')
|
|
op.soonType = 2
|
|
fs.writeFileSync(result.filePath, JSON.stringify(op))
|
|
})
|
|
.catch((err) => {
|
|
console.log()
|
|
})
|
|
//return false 开启该代码可禁止点击该按钮关闭
|
|
})
|
|
})
|
|
})
|
|
var _keyctrl = false,
|
|
_keyc = false,
|
|
_textEdit = false,
|
|
_inputEdit = false
|
|
$('input').focus(function () {
|
|
console.log(1)
|
|
_inputEdit = true
|
|
})
|
|
$('input').blur(function () {
|
|
_inputEdit = false
|
|
})
|
|
$('textarea').focus(function () {
|
|
console.log(1)
|
|
_inputEdit = true
|
|
})
|
|
$('textarea').blur(function () {
|
|
_inputEdit = false
|
|
})
|
|
$('body').keyup(function (event) {
|
|
if (event.keyCode == 17) {
|
|
_keyctrl = false
|
|
}
|
|
if (event.keyCode == 67) {
|
|
_keyc = false
|
|
}
|
|
})
|
|
$('body').keydown(function (event) {
|
|
console.log(event)
|
|
|
|
if (event.keyCode == 17) {
|
|
_keyctrl = true
|
|
if (_keyc && _textEdit) {
|
|
//同时按下且在编辑状态
|
|
setTimeout("clipboard.writeText( (clipboard.readText()+' ') );", 1)
|
|
//clipboard.writeText((clipboard.readText()+' '))
|
|
}
|
|
}
|
|
if (event.keyCode == 67) {
|
|
_keyc = true
|
|
if (_keyctrl & _textEdit) {
|
|
//同时按下且在编辑状态
|
|
setTimeout("clipboard.writeText( (clipboard.readText()+' ') );", 1)
|
|
//clipboard.writeText((clipboard.readText()+' '))
|
|
}
|
|
}
|
|
if (event.keyCode == 37) {
|
|
//left
|
|
let v = -1
|
|
if (_keyctrl) {
|
|
v = -5
|
|
}
|
|
let x = canvas.getActiveObject().get('left')
|
|
x += v
|
|
canvas.getActiveObject().set('left', x)
|
|
canvas.renderAll()
|
|
recordState()
|
|
updateControls()
|
|
}
|
|
if (event.keyCode == 38) {
|
|
//up
|
|
let v = -1
|
|
if (_keyctrl) {
|
|
v = -5
|
|
}
|
|
let y = canvas.getActiveObject().get('top')
|
|
y += v
|
|
canvas.getActiveObject().set('top', y)
|
|
canvas.renderAll()
|
|
recordState()
|
|
updateControls()
|
|
}
|
|
if (event.keyCode == 39) {
|
|
//right
|
|
let v = 1
|
|
if (_keyctrl) {
|
|
v = 5
|
|
}
|
|
let x = canvas.getActiveObject().get('left')
|
|
x += v
|
|
canvas.getActiveObject().set('left', x)
|
|
canvas.renderAll()
|
|
recordState()
|
|
updateControls()
|
|
}
|
|
if (event.keyCode == 40) {
|
|
//down
|
|
let v = +1
|
|
if (_keyctrl) {
|
|
v = 5
|
|
}
|
|
let y = canvas.getActiveObject().get('top')
|
|
y += v
|
|
canvas.getActiveObject().set('top', y)
|
|
canvas.renderAll()
|
|
recordState()
|
|
updateControls()
|
|
}
|
|
if (event.keyCode != 46 || _inputEdit || _textEdit) return
|
|
let actObjs = canvas.getActiveObjects()
|
|
let allObjs = canvas.getObjects()
|
|
let flag = 0
|
|
for (let item of actObjs) {
|
|
if (item != allObjs[0]) {
|
|
let i = getIndex(item) //0是背景，所以从1开始，但objs不包含背景图片，故要-1
|
|
objs.splice(i - 1, 1)
|
|
canvas.remove(item)
|
|
flag = 1
|
|
}
|
|
}
|
|
updateList()
|
|
canvas.discardActiveObject()
|
|
if (flag == 1) {
|
|
recordState()
|
|
canvas.renderAll()
|
|
handleObjectSelected()
|
|
}
|
|
})
|
|
let pre_add_image
|
|
$('#addPic').click(function () {
|
|
OpenDialog()
|
|
function OpenDialog() {
|
|
dialog
|
|
.showOpenDialog({
|
|
title: language_str('selectPic'), //请选择图片
|
|
buttonLabel: language_str('comf'), //"确认"
|
|
filters: [{ name: 'Image File Type', extensions: ['png', 'jpg'] }]
|
|
})
|
|
.then((result) => {
|
|
if (result.canceled) return
|
|
//console.log(result.filePaths)
|
|
fabric.Image.fromURL(result.filePaths[0], function (image) {
|
|
//image.left = pointer.x;
|
|
//image.top = pointer.y;
|
|
image.setSrc(image.toDataURL(), function (image) {
|
|
pre_add_image = image
|
|
background_image.hoverCursor = 'crosshair'
|
|
$(this).css('background-color', '#646E76')
|
|
|
|
$('#addOutPic').css('background-color', '')
|
|
$('#addText').css('background-color', '')
|
|
$('#addOutText').css('background-color', '')
|
|
$('#addRect').css('background-color', '')
|
|
$('#addCircle').css('background-color', '')
|
|
$('#addLine').css('background-color', '')
|
|
$('#addQrCode').css('background-color', '')
|
|
$('#addBarCode').css('background-color', '')
|
|
$('#addCounter').css('background-color', '')
|
|
addState = 1
|
|
})
|
|
//canvas.add(image);
|
|
//objs.push({type: 1});
|
|
//canvas.renderAll();
|
|
//updateList();
|
|
//recordState();
|
|
})
|
|
})
|
|
.catch((err) => {
|
|
console.log(err)
|
|
})
|
|
}
|
|
})
|
|
$('#addOutPic').click(function () {
|
|
background_image.hoverCursor = 'crosshair'
|
|
$(this).css('background-color', '#646E76')
|
|
|
|
$('#addPic').css('background-color', '')
|
|
$('#addText').css('background-color', '')
|
|
$('#addOutText').css('background-color', '')
|
|
$('#addRect').css('background-color', '')
|
|
$('#addCircle').css('background-color', '')
|
|
$('#addLine').css('background-color', '')
|
|
$('#addQrCode').css('background-color', '')
|
|
$('#addBarCode').css('background-color', '')
|
|
$('#addCounter').css('background-color', '')
|
|
addState = 2
|
|
})
|
|
$('#addText').click(function () {
|
|
background_image.hoverCursor = 'crosshair'
|
|
$(this).css('background-color', '#646E76')
|
|
|
|
$('#addPic').css('background-color', '')
|
|
$('#addOutPic').css('background-color', '')
|
|
$('#addOutText').css('background-color', '')
|
|
$('#addRect').css('background-color', '')
|
|
$('#addCircle').css('background-color', '')
|
|
$('#addLine').css('background-color', '')
|
|
$('#addQrCode').css('background-color', '')
|
|
$('#addBarCode').css('background-color', '')
|
|
$('#addCounter').css('background-color', '')
|
|
addState = 3
|
|
})
|
|
$('#addOutText').click(function () {
|
|
background_image.hoverCursor = 'crosshair'
|
|
$(this).css('background-color', '#646E76')
|
|
|
|
$('#addPic').css('background-color', '')
|
|
$('#addOutPic').css('background-color', '')
|
|
$('#addText').css('background-color', '')
|
|
$('#addRect').css('background-color', '')
|
|
$('#addCircle').css('background-color', '')
|
|
$('#addLine').css('background-color', '')
|
|
$('#addQrCode').css('background-color', '')
|
|
$('#addBarCode').css('background-color', '')
|
|
$('#addCounter').css('background-color', '')
|
|
addState = 4
|
|
})
|
|
$('#addRect').click(function () {
|
|
background_image.hoverCursor = 'crosshair'
|
|
$(this).css('background-color', '#646E76')
|
|
|
|
$('#addPic').css('background-color', '')
|
|
$('#addOutPic').css('background-color', '')
|
|
$('#addText').css('background-color', '')
|
|
$('#addOutText').css('background-color', '')
|
|
$('#addCircle').css('background-color', '')
|
|
$('#addLine').css('background-color', '')
|
|
$('#addQrCode').css('background-color', '')
|
|
$('#addBarCode').css('background-color', '')
|
|
$('#addCounter').css('background-color', '')
|
|
addState = 5
|
|
})
|
|
$('#addCircle').click(function () {
|
|
background_image.hoverCursor = 'crosshair'
|
|
$(this).css('background-color', '#646E76')
|
|
|
|
$('#addPic').css('background-color', '')
|
|
$('#addOutPic').css('background-color', '')
|
|
$('#addText').css('background-color', '')
|
|
$('#addOutText').css('background-color', '')
|
|
$('#addRect').css('background-color', '')
|
|
$('#addLine').css('background-color', '')
|
|
$('#addQrCode').css('background-color', '')
|
|
$('#addBarCode').css('background-color', '')
|
|
$('#addCounter').css('background-color', '')
|
|
addState = 6
|
|
})
|
|
$('#addLine').click(function () {
|
|
background_image.hoverCursor = 'crosshair'
|
|
$(this).css('background-color', '#646E76')
|
|
|
|
$('#addPic').css('background-color', '')
|
|
$('#addOutPic').css('background-color', '')
|
|
$('#addText').css('background-color', '')
|
|
$('#addOutText').css('background-color', '')
|
|
$('#addRect').css('background-color', '')
|
|
$('#addCircle').css('background-color', '')
|
|
$('#addQrCode').css('background-color', '')
|
|
$('#addBarCode').css('background-color', '')
|
|
$('#addCounter').css('background-color', '')
|
|
addState = 7
|
|
})
|
|
$('#addQrCode').click(function () {
|
|
background_image.hoverCursor = 'crosshair'
|
|
$(this).css('background-color', '#646E76')
|
|
|
|
$('#addPic').css('background-color', '')
|
|
$('#addOutPic').css('background-color', '')
|
|
$('#addText').css('background-color', '')
|
|
$('#addOutText').css('background-color', '')
|
|
$('#addRect').css('background-color', '')
|
|
$('#addCircle').css('background-color', '')
|
|
$('#addLine').css('background-color', '')
|
|
$('#addBarCode').css('background-color', '')
|
|
$('#addCounter').css('background-color', '')
|
|
addState = 8
|
|
})
|
|
$('#addBarCode').click(function () {
|
|
background_image.hoverCursor = 'crosshair'
|
|
$(this).css('background-color', '#646E76')
|
|
|
|
$('#addPic').css('background-color', '')
|
|
$('#addOutPic').css('background-color', '')
|
|
$('#addText').css('background-color', '')
|
|
$('#addOutText').css('background-color', '')
|
|
$('#addRect').css('background-color', '')
|
|
$('#addCircle').css('background-color', '')
|
|
$('#addLine').css('background-color', '')
|
|
$('#addQrCode').css('background-color', '')
|
|
$('#addCounter').css('background-color', '')
|
|
addState = 9
|
|
})
|
|
$('#addCounter').click(function () {
|
|
background_image.hoverCursor = 'crosshair'
|
|
$(this).css('background-color', '#646E76')
|
|
|
|
$('#addPic').css('background-color', '')
|
|
$('#addOutPic').css('background-color', '')
|
|
$('#addText').css('background-color', '')
|
|
$('#addOutText').css('background-color', '')
|
|
$('#addRect').css('background-color', '')
|
|
$('#addCircle').css('background-color', '')
|
|
$('#addLine').css('background-color', '')
|
|
$('#addQrCode').css('background-color', '')
|
|
$('#addBarCode').css('background-color', '')
|
|
addState = 10
|
|
})
|
|
$('#version_change').click(function () {
|
|
if (bg_version == 1) {
|
|
bg_version = 2
|
|
} else {
|
|
bg_version = 1
|
|
}
|
|
// 类型改变
|
|
$('#source_front').attr('src', './public/images/front_bg' + bg_version + '_2.png')
|
|
canvas.renderAll()
|
|
})
|
|
$('#front_side').click(function () {
|
|
$(this).addClass('ui-button-active')
|
|
$('#back_side').removeClass('ui-button-active')
|
|
$('.canvas-container:eq(0)').show()
|
|
$('.canvas-container:eq(1)').hide()
|
|
console.log('------')
|
|
console.log(recordObjs1)
|
|
console.log('------')
|
|
canvas = canvas1
|
|
objs = objs1
|
|
background_image = background_image1
|
|
next_objs = next_objs1
|
|
pre_objs = pre_objs1
|
|
next_json = next_json1
|
|
pre_json = pre_json1
|
|
recordObjs = recordObjs1
|
|
recordJson = recordJson1
|
|
step = step1
|
|
updateList()
|
|
|
|
$('#line_control').hide()
|
|
$('#base_control').hide()
|
|
$('#pic_control').hide()
|
|
$('#out_pic_control').hide()
|
|
$('#text_control').hide()
|
|
$('#out_text_control').hide()
|
|
$('#rect_control').hide()
|
|
$('#circle_control').hide()
|
|
$('#counter_control').hide()
|
|
$('#qrcode_Controll').hide()
|
|
$('#barcode_controll').hide()
|
|
$('#component_type').text(language_str('bg')) //背景
|
|
})
|
|
$('#back_side').click(function () {
|
|
$(this).addClass('ui-button-active')
|
|
$('#front_side').removeClass('ui-button-active')
|
|
$('.canvas-container:eq(0)').hide()
|
|
$('.canvas-container:eq(1)').show()
|
|
canvas = canvas2
|
|
objs = objs2
|
|
background_image = background_image2
|
|
next_objs = next_objs2
|
|
pre_objs = pre_objs2
|
|
next_json = next_json2
|
|
pre_json = pre_json2
|
|
recordObjs = recordObjs2
|
|
recordJson = recordJson2
|
|
step = step2
|
|
updateList()
|
|
$('#line_control').hide()
|
|
$('#base_control').hide()
|
|
$('#pic_control').hide()
|
|
$('#out_pic_control').hide()
|
|
$('#text_control').hide()
|
|
$('#out_text_control').hide()
|
|
$('#rect_control').hide()
|
|
$('#circle_control').hide()
|
|
$('#counter_control').hide()
|
|
$('#qrcode_Controll').hide()
|
|
$('#barcode_controll').hide()
|
|
$('#component_type').text(language_str('bg')) //"背景"
|
|
})
|
|
$('#top_alignment').click(function () {
|
|
let _objs = canvas.getActiveObjects()
|
|
if (_objs.length == 1) {
|
|
//只选中了一个
|
|
_objs[0].set('top', background_image.get('top'))
|
|
canvas.renderAll()
|
|
return
|
|
}
|
|
let top = 0
|
|
for (let item of _objs) {
|
|
let t_top = item.get('top')
|
|
if (t_top < top) {
|
|
top = t_top
|
|
}
|
|
}
|
|
groupItems = []
|
|
for (let item of _objs) {
|
|
item.set('top', top)
|
|
groupItems.push(item)
|
|
}
|
|
canvas.discardActiveObject()
|
|
let sel = new fabric.ActiveSelection(groupItems, {
|
|
canvas: canvas
|
|
})
|
|
canvas.setActiveObject(sel)
|
|
canvas.requestRenderAll()
|
|
canvas.renderAll()
|
|
})
|
|
$('#bottom_alignment').click(function () {
|
|
let _objs = canvas.getActiveObjects()
|
|
if (_objs.length == 1) {
|
|
//只选中了一个
|
|
let idx = getIndex(_objs[0])
|
|
let type = objs[idx - 1].type
|
|
let other = 0 //strokeWidth
|
|
if (type == 5 || type == 6 || type == 7) {
|
|
other = _objs[0].get('strokeWidth')
|
|
}
|
|
_objs[0].set('top', background_image.get('top') + background_image.get('height') - _objs[0].get('height') * _objs[0].get('scaleY') - other)
|
|
canvas.renderAll()
|
|
return
|
|
}
|
|
let bottom = 0
|
|
for (let item of _objs) {
|
|
let idx = getIndex(item)
|
|
let type = objs[idx - 1].type
|
|
let other = 0 //strokeWidth
|
|
if (type == 5 || type == 6 || type == 7) {
|
|
other = item.get('strokeWidth')
|
|
}
|
|
let t_b = item.get('top') + item.get('height') * item.get('scaleY') + other
|
|
if (t_b > bottom) {
|
|
bottom = t_b
|
|
}
|
|
}
|
|
groupItems = []
|
|
for (let item of _objs) {
|
|
let idx = getIndex(item)
|
|
let type = objs[idx - 1].type
|
|
let other = 0 //strokeWidth
|
|
if (type == 5 || type == 6 || type == 7) {
|
|
other = item.get('strokeWidth')
|
|
}
|
|
item.set('top', bottom - item.get('height') * item.get('scaleY') - other)
|
|
groupItems.push(item)
|
|
}
|
|
canvas.discardActiveObject()
|
|
let sel = new fabric.ActiveSelection(groupItems, {
|
|
canvas: canvas
|
|
})
|
|
canvas.setActiveObject(sel)
|
|
canvas.requestRenderAll()
|
|
canvas.renderAll()
|
|
})
|
|
$('#center_y_alignment').click(function () {
|
|
let _objs = canvas.getActiveObjects()
|
|
if (_objs.length == 1) {
|
|
//只选中了一个
|
|
let idx = getIndex(_objs[0])
|
|
let type = objs[idx - 1].type
|
|
let other = 0 //strokeWidth
|
|
if (type == 5 || type == 6 || type == 7) {
|
|
other = _objs[0].get('strokeWidth')
|
|
}
|
|
_objs[0].set('top', background_image.get('top') + (background_image.get('height') - (_objs[0].get('height') + other) * _objs[0].get('scaleY')) / 2)
|
|
canvas.renderAll()
|
|
return
|
|
}
|
|
let top = 0
|
|
for (let item of _objs) {
|
|
let t_top = item.get('top')
|
|
if (t_top < top) {
|
|
top = t_top
|
|
}
|
|
}
|
|
groupItems = []
|
|
for (let item of _objs) {
|
|
let idx = getIndex(item)
|
|
let type = objs[idx - 1].type
|
|
let other = 0 //strokeWidth
|
|
if (type == 5 || type == 6 || type == 7) {
|
|
other = item.get('strokeWidth')
|
|
}
|
|
item.set('top', top + (item.group.height - (item.get('height') + other) * item.get('scaleY')) / 2)
|
|
groupItems.push(item)
|
|
}
|
|
canvas.discardActiveObject()
|
|
let sel = new fabric.ActiveSelection(groupItems, {
|
|
canvas: canvas
|
|
})
|
|
canvas.setActiveObject(sel)
|
|
canvas.requestRenderAll()
|
|
canvas.renderAll()
|
|
})
|
|
$('#left_alignment').click(function () {
|
|
let _objs = canvas.getActiveObjects()
|
|
if (_objs.length == 1) {
|
|
//只选中了一个
|
|
_objs[0].set('left', background_image.get('left'))
|
|
canvas.renderAll()
|
|
return
|
|
}
|
|
let left = 0
|
|
for (let item of _objs) {
|
|
let t_left = item.get('left')
|
|
if (t_left < left) {
|
|
left = t_left
|
|
}
|
|
}
|
|
groupItems = []
|
|
for (let item of _objs) {
|
|
item.set('left', left)
|
|
groupItems.push(item)
|
|
}
|
|
canvas.discardActiveObject()
|
|
let sel = new fabric.ActiveSelection(groupItems, {
|
|
canvas: canvas
|
|
})
|
|
canvas.setActiveObject(sel)
|
|
canvas.requestRenderAll()
|
|
canvas.renderAll()
|
|
})
|
|
$('#right_alignment').click(function () {
|
|
let _objs = canvas.getActiveObjects()
|
|
if (_objs.length == 1) {
|
|
//只选中了一个
|
|
let idx = getIndex(_objs[0])
|
|
let type = objs[idx - 1].type
|
|
let other = 0 //strokeWidth
|
|
if (type == 5 || type == 6 || type == 7) {
|
|
other = item.get('strokeWidth')
|
|
}
|
|
_objs[0].set('left', background_image.get('left') + background_image.get('width') - _objs[0].get('width') * _objs[0].get('scaleX') - other)
|
|
canvas.renderAll()
|
|
return
|
|
}
|
|
let right = 0
|
|
for (let item of _objs) {
|
|
let idx = getIndex(item)
|
|
let type = objs[idx - 1].type
|
|
let other = 0 //strokeWidth
|
|
if (type == 5 || type == 6 || type == 7) {
|
|
other = item.get('strokeWidth')
|
|
}
|
|
let t_r = item.get('left') + item.get('width') * item.get('scaleX') + other
|
|
if (t_r > right) {
|
|
right = t_r
|
|
}
|
|
}
|
|
let groupItems = []
|
|
|
|
for (let item of _objs) {
|
|
let idx = getIndex(item)
|
|
let type = objs[idx - 1].type
|
|
let other = 0 //strokeWidth
|
|
if (type == 5 || type == 6 || type == 7) {
|
|
other = item.get('strokeWidth')
|
|
}
|
|
item.set('left', right - item.get('width') * item.get('scaleX') - other)
|
|
groupItems.push(item)
|
|
}
|
|
//BUG1
|
|
canvas.discardActiveObject()
|
|
let sel = new fabric.ActiveSelection(groupItems, {
|
|
canvas: canvas
|
|
})
|
|
canvas.setActiveObject(sel)
|
|
canvas.requestRenderAll()
|
|
canvas.renderAll()
|
|
})
|
|
$('#center_x_alignment').click(function () {
|
|
let _objs = canvas.getActiveObjects()
|
|
if (_objs.length == 1) {
|
|
//只选中了一个
|
|
let idx = getIndex(_objs[0])
|
|
let type = objs[idx - 1].type
|
|
let other = 0 //strokeWidth
|
|
if (type == 5 || type == 6 || type == 7) {
|
|
other = _objs[0].get('strokeWidth')
|
|
}
|
|
_objs[0].set('left', background_image.get('left') + (background_image.get('width') - (_objs[0].get('width') + other) * _objs[0].get('scaleX')) / 2)
|
|
canvas.renderAll()
|
|
return
|
|
}
|
|
let left = 0
|
|
for (let item of _objs) {
|
|
let t_left = item.get('left')
|
|
if (t_left < left) {
|
|
left = t_left
|
|
}
|
|
}
|
|
groupItems = []
|
|
for (let item of _objs) {
|
|
let idx = getIndex(item)
|
|
let type = objs[idx - 1].type
|
|
let other = 0 //strokeWidth
|
|
if (type == 5 || type == 6 || type == 7) {
|
|
other = item.get('strokeWidth')
|
|
}
|
|
item.set('left', left + (item.group.width - (item.get('width') + other) * item.get('scaleX')) / 2)
|
|
groupItems.push(item)
|
|
}
|
|
canvas.discardActiveObject()
|
|
let sel = new fabric.ActiveSelection(groupItems, {
|
|
canvas: canvas
|
|
})
|
|
canvas.setActiveObject(sel)
|
|
canvas.requestRenderAll()
|
|
canvas.renderAll()
|
|
})
|
|
$('#up_obj').click(function () {
|
|
//上移，放到前面 数组中在后面
|
|
let idx = getIndex(canvas.getActiveObject())
|
|
if (idx + 1 != canvas.getObjects().length) {
|
|
canvas.bringForward(canvas.getActiveObject())
|
|
canvas.renderAll()
|
|
let temp = objs[idx - 1]
|
|
objs[idx - 1] = objs[idx]
|
|
objs[idx] = temp
|
|
//console.log(objs);
|
|
//[objs[idx-2],objs[idx-1]] = [objs[idx-1],objs[idx-2]];
|
|
|
|
recordState()
|
|
updateList()
|
|
selectObj(idx)
|
|
}
|
|
})
|
|
$('#down_obj').click(function () {
|
|
//下移，放到后面 数组中在前面
|
|
let idx = getIndex(canvas.getActiveObject())
|
|
if (idx != 1) {
|
|
canvas.sendBackwards(canvas.getActiveObject())
|
|
canvas.renderAll()
|
|
//[objs[idx-2],objs[idx-1]] = [objs[idx-1],objs[idx-2]];
|
|
|
|
let temp = objs[idx - 1]
|
|
objs[idx - 1] = objs[idx - 2]
|
|
objs[idx - 2] = temp
|
|
recordState()
|
|
updateList()
|
|
selectObj(idx - 2)
|
|
}
|
|
})
|
|
$('#set_bg').click(function () {
|
|
//设置为背景
|
|
let obj = canvas.getActiveObject()
|
|
let idx = getIndex(canvas.getActiveObject())
|
|
const scaleX = 1012 / obj.width
|
|
const scaleY = 648 / obj.height
|
|
obj.set({
|
|
scaleX: scaleX,
|
|
scaleY: scaleY,
|
|
left: ($('#canvas1').width() - 1012) / 2,
|
|
top: ($('#canvas1').height() - 648) / 2
|
|
})
|
|
$('#text_w').val(1012)
|
|
$('#text_h').val(648)
|
|
$('#text_x').val(0)
|
|
$('#text_y').val(0)
|
|
canvas.sendToBack(canvas.getActiveObject())
|
|
canvas.bringForward(canvas.getActiveObject())
|
|
canvas.renderAll()
|
|
let objItem = objs.splice(idx - 1, 1)[0]
|
|
objs.unshift(objItem)
|
|
recordState()
|
|
updateList()
|
|
selectObj(0)
|
|
})
|
|
$('#previous').click(function () {
|
|
//撤销一次操作
|
|
if (step.val == 0) {
|
|
return
|
|
}
|
|
|
|
step.val--
|
|
console.log(recordJson[step.val])
|
|
canvas.loadFromJSON(recordJson[step.val])
|
|
if ($('#front_side').hasClass('ui-button-active')) {
|
|
//objs = JSON.parse(recordObjs[step.val]);
|
|
objs1 = JSON.parse(recordObjs[step.val])
|
|
objs = objs1
|
|
} else if ($('#back_side').hasClass('ui-button-active')) {
|
|
//objs = JSON.parse(recordObjs[step.val]);
|
|
objs2 = JSON.parse(recordObjs[step.val])
|
|
objs = objs2
|
|
}
|
|
|
|
background_image = canvas.getObjects()[0]
|
|
canvas.renderAll()
|
|
//recordState();
|
|
updateList()
|
|
|
|
selectObj(-1)
|
|
|
|
$('#base_control').hide()
|
|
$('#line_control').hide()
|
|
$('#pic_control').hide()
|
|
$('#out_pic_control').hide()
|
|
$('#text_control').hide()
|
|
$('#out_text_control').hide()
|
|
$('#rect_control').hide()
|
|
$('#circle_control').hide()
|
|
$('#counter_control').hide()
|
|
$('#qrcode_Controll').hide()
|
|
$('#barcode_controll').hide()
|
|
})
|
|
$('#next').click(function () {
|
|
//撤销一次撤销操作
|
|
if (step.val >= recordObjs.length - 1) {
|
|
return
|
|
}
|
|
|
|
++step.val
|
|
canvas.loadFromJSON(recordJson[step.val])
|
|
if ($('#front_side').hasClass('ui-button-active')) {
|
|
//objs = JSON.parse(recordObjs[step.val]);
|
|
objs1 = JSON.parse(recordObjs[step.val])
|
|
objs = objs1
|
|
} else if ($('#back_side').hasClass('ui-button-active')) {
|
|
//objs = JSON.parse(recordObjs[step.val]);
|
|
objs2 = JSON.parse(recordObjs[step.val])
|
|
objs = objs2
|
|
}
|
|
background_image = canvas.getObjects()[0]
|
|
canvas.renderAll()
|
|
selectObj(-1)
|
|
|
|
$('#base_control').hide()
|
|
$('#line_control').hide()
|
|
$('#pic_control').hide()
|
|
$('#out_pic_control').hide()
|
|
$('#text_control').hide()
|
|
$('#out_text_control').hide()
|
|
$('#rect_control').hide()
|
|
$('#circle_control').hide()
|
|
$('#counter_control').hide()
|
|
$('#qrcode_Controll').hide()
|
|
$('#barcode_controll').hide()
|
|
updateList()
|
|
})
|
|
$('#clean').click(function () {
|
|
objs.splice(0, objs.length)
|
|
|
|
let allObjs = canvas.getObjects()
|
|
for (let item of allObjs) {
|
|
if (item != allObjs[0]) {
|
|
canvas.remove(item)
|
|
}
|
|
}
|
|
updateList()
|
|
recordState()
|
|
})
|
|
$('#rotate').click(function () {
|
|
let obj = canvas.getActiveObject()
|
|
obj.rotate(Math.round((obj.get('angle') + 90) % 360))
|
|
$('#text_r').val(obj.get('angle'))
|
|
canvas.renderAll()
|
|
updateControls()
|
|
recordState()
|
|
})
|
|
$('#text_italics').click(function () {
|
|
if ($(this).hasClass('ui-radio-acitve')) {
|
|
//已选
|
|
canvas.getActiveObject().set('fontStyle', 'normal')
|
|
$(this).removeClass('ui-radio-acitve')
|
|
} else {
|
|
//未选
|
|
canvas.getActiveObject().set('fontStyle', 'italic')
|
|
$(this).addClass('ui-radio-acitve')
|
|
}
|
|
recordState()
|
|
canvas.renderAll()
|
|
})
|
|
$('#text_bold').click(function () {
|
|
if ($(this).hasClass('ui-radio-acitve')) {
|
|
//已选,恢复正常
|
|
canvas.getActiveObject().set('fontWeight', 'normal')
|
|
$(this).removeClass('ui-radio-acitve')
|
|
} else {
|
|
//未选
|
|
canvas.getActiveObject().set('fontWeight', 'bold')
|
|
$(this).addClass('ui-radio-acitve')
|
|
}
|
|
recordState()
|
|
canvas.renderAll()
|
|
})
|
|
$('#text_underline').click(function () {
|
|
if ($(this).hasClass('ui-radio-acitve')) {
|
|
//已选
|
|
canvas.getActiveObject().set('underline', false)
|
|
$(this).removeClass('ui-radio-acitve')
|
|
} else {
|
|
//未选
|
|
canvas.getActiveObject().set('underline', true)
|
|
$(this).addClass('ui-radio-acitve')
|
|
}
|
|
recordState()
|
|
canvas.renderAll()
|
|
})
|
|
$('#text_linethrough').click(function () {
|
|
if ($(this).hasClass('ui-radio-acitve')) {
|
|
//已选
|
|
canvas.getActiveObject().set('linethrough', false)
|
|
$(this).removeClass('ui-radio-acitve')
|
|
} else {
|
|
//未选
|
|
canvas.getActiveObject().set('linethrough', true)
|
|
$(this).addClass('ui-radio-acitve')
|
|
}
|
|
recordState()
|
|
canvas.renderAll()
|
|
})
|
|
$('#out_text_italics').click(function () {
|
|
if ($(this).hasClass('ui-radio-acitve')) {
|
|
//已选
|
|
canvas.getActiveObject().set('fontStyle', 'normal')
|
|
$(this).removeClass('ui-radio-acitve')
|
|
} else {
|
|
//未选
|
|
canvas.getActiveObject().set('fontStyle', 'italic')
|
|
$(this).addClass('ui-radio-acitve')
|
|
}
|
|
recordState()
|
|
canvas.renderAll()
|
|
})
|
|
$('#out_text_bold').click(function () {
|
|
if ($(this).hasClass('ui-radio-acitve')) {
|
|
//已选,恢复正常
|
|
canvas.getActiveObject().set('fontWeight', 'normal')
|
|
$(this).removeClass('ui-radio-acitve')
|
|
} else {
|
|
//未选
|
|
canvas.getActiveObject().set('fontWeight', 'bold')
|
|
$(this).addClass('ui-radio-acitve')
|
|
}
|
|
recordState()
|
|
canvas.renderAll()
|
|
})
|
|
$('#out_text_underline').click(function () {
|
|
if ($(this).hasClass('ui-radio-acitve')) {
|
|
//已选
|
|
canvas.getActiveObject().set('underline', false)
|
|
$(this).removeClass('ui-radio-acitve')
|
|
} else {
|
|
//未选
|
|
canvas.getActiveObject().set('underline', true)
|
|
$(this).addClass('ui-radio-acitve')
|
|
}
|
|
recordState()
|
|
canvas.renderAll()
|
|
})
|
|
$('#out_text_linethrough').click(function () {
|
|
if ($(this).hasClass('ui-radio-acitve')) {
|
|
//已选
|
|
canvas.getActiveObject().set('linethrough', false)
|
|
$(this).removeClass('ui-radio-acitve')
|
|
} else {
|
|
//未选
|
|
canvas.getActiveObject().set('linethrough', true)
|
|
$(this).addClass('ui-radio-acitve')
|
|
}
|
|
recordState()
|
|
canvas.renderAll()
|
|
})
|
|
$('#lock').click(function () {
|
|
canvas.getActiveObject().set('selectable', !canvas.getActiveObject().get('selectable'))
|
|
if (canvas.getActiveObject().get('selectable')) {
|
|
$('#lock_img').attr('src', 'public/images/unlock20.png') //已经上锁，需要解锁
|
|
} else {
|
|
$('#lock_img').attr('src', 'public/images/lock20.png') //没上锁，可以上锁
|
|
}
|
|
recordState()
|
|
canvas.renderAll()
|
|
})
|
|
$('#text_back_transparent').click(function () {
|
|
canvas.getActiveObject().set('textBackgroundColor', '')
|
|
$('#text_back_color').val('#ffffff')
|
|
canvas.renderAll()
|
|
})
|
|
$('#out_text_back_transparent').click(function () {
|
|
canvas.getActiveObject().set('textBackgroundColor', '')
|
|
$('#out_text_back_color').val('#ffffff')
|
|
canvas.renderAll()
|
|
})
|
|
$('#rect_transparent').click(function () {
|
|
canvas.getActiveObject().set('fill', '')
|
|
$('#rect_color').val('#ffffff')
|
|
canvas.renderAll()
|
|
})
|
|
$('#rect_stroke_transparent').click(function () {
|
|
canvas.getActiveObject().set('stroke', '')
|
|
$('#rect_stroke').val('#ffffff')
|
|
canvas.renderAll()
|
|
})
|
|
$('#circle_transparent').click(function () {
|
|
canvas.getActiveObject().set('fill', '')
|
|
$('#circle_color').val('#ffffff')
|
|
canvas.renderAll()
|
|
})
|
|
$('#circle_stroke_transparent').click(function () {
|
|
canvas.getActiveObject().set('stroke', '')
|
|
$('#circle_stroke').val('#ffffff')
|
|
canvas.renderAll()
|
|
})
|
|
function saveAs(op1, callback) {
|
|
let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
|
|
let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
|
|
let _g1 = [],
|
|
_g2 = []
|
|
let left = 0,
|
|
top = 0
|
|
for (let _o of canvas1.getObjects()) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
_g1.push(fabric.util.object.clone(_o))
|
|
}
|
|
let fp = new fabric.Group(_g1).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: top / zoom,
|
|
left: left / zoom
|
|
})
|
|
; (left = 0), (top = 0)
|
|
for (let _o of canvas2.getObjects()) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
_g2.push(fabric.util.object.clone(_o))
|
|
}
|
|
//let fp = new fabric.Group(_g1).toDataURL();
|
|
let bp = new fabric.Group(_g2).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: top / zoom,
|
|
left: left / zoom
|
|
})
|
|
let o = { f: j, b: b, fo: objs1, bo: objs2, fp: fp, bp: bp }
|
|
let con_o = Object.assign(o, op1)
|
|
dialog
|
|
.showSaveDialog({
|
|
title: language_str('saveFile'), //'保存文件'
|
|
filters: [{ name: 'Soon File Type', extensions: ['soon'] }]
|
|
})
|
|
.then((result) => {
|
|
if (result.filePath == '') {
|
|
return
|
|
}
|
|
if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
|
|
result.filePath += '.soon'
|
|
}
|
|
let fs = require('fs')
|
|
con_o.soonType = 2
|
|
fs.writeFileSync(result.filePath, JSON.stringify(con_o))
|
|
openAs.name = result.filePath
|
|
layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
|
|
saveHistory()
|
|
callback()
|
|
})
|
|
.catch((err) => {
|
|
console.log()
|
|
})
|
|
}
|
|
function save(op1, callback) {
|
|
let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
|
|
let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
|
|
let _g1 = [],
|
|
_g2 = []
|
|
let left = 0,
|
|
top = 0
|
|
for (let _o of canvas1.getObjects()) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
_g1.push(fabric.util.object.clone(_o))
|
|
}
|
|
let fp = new fabric.Group(_g1).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: top / zoom,
|
|
left: left / zoom
|
|
})
|
|
; (left = 0), (top = 0)
|
|
for (let _o of canvas2.getObjects()) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
_g2.push(fabric.util.object.clone(_o))
|
|
}
|
|
//let fp = new fabric.Group(_g1).toDataURL();
|
|
let bp = new fabric.Group(_g2).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: top / zoom,
|
|
left: left / zoom
|
|
})
|
|
let o = { f: j, b: b, fo: objs1, bo: objs2, fp: fp, bp: bp }
|
|
let con_o = Object.assign(o, op1)
|
|
console.log(op1)
|
|
if (openAs.name != '') {
|
|
//打开的文件
|
|
let fs = require('fs')
|
|
fs.writeFileSync(openAs.name, JSON.stringify(con_o))
|
|
layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
|
|
saveHistory()
|
|
callback()
|
|
return
|
|
}
|
|
dialog
|
|
.showSaveDialog({
|
|
title: language_str('saveFile'), //'保存文件'
|
|
filters: [{ name: 'Soon File Type', extensions: ['soon'] }]
|
|
})
|
|
.then((result) => {
|
|
if (result.filePath == '') {
|
|
return
|
|
}
|
|
if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
|
|
result.filePath += '.soon'
|
|
}
|
|
let fs = require('fs')
|
|
con_o.soonType = 2
|
|
fs.writeFileSync(result.filePath, JSON.stringify(con_o))
|
|
openAs.name = result.filePath
|
|
layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
|
|
saveHistory()
|
|
callback()
|
|
})
|
|
.catch((err) => {
|
|
console.log()
|
|
})
|
|
}
|
|
$('#save').click(function () {
|
|
output()
|
|
return
|
|
let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
|
|
let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
|
|
let _g1 = [],
|
|
_g2 = []
|
|
let left = 0,
|
|
top = 0
|
|
for (let _o of canvas1.getObjects()) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
_g1.push(fabric.util.object.clone(_o))
|
|
}
|
|
let fp = new fabric.Group(_g1).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: top / zoom,
|
|
left: left / zoom
|
|
})
|
|
; (left = 0), (top = 0)
|
|
for (let _o of canvas2.getObjects()) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
_g2.push(fabric.util.object.clone(_o))
|
|
}
|
|
//let fp = new fabric.Group(_g1).toDataURL();
|
|
let bp = new fabric.Group(_g2).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: top / zoom,
|
|
left: left / zoom
|
|
})
|
|
let o = { f: j, b: b, fo: objs1, bo: objs2, fp: fp, bp: bp }
|
|
let con_o = Object.assign(o, op1)
|
|
console.log(op1)
|
|
if (openAs.name != '') {
|
|
//打开的文件
|
|
let fs = require('fs')
|
|
fs.writeFileSync(openAs.name, JSON.stringify(con_o))
|
|
layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
|
|
saveHistory()
|
|
return
|
|
}
|
|
dialog
|
|
.showSaveDialog({
|
|
title: language_str('saveFile'), //'保存文件'
|
|
filters: [{ name: 'Soon File Type', extensions: ['soon'] }]
|
|
})
|
|
.then((result) => {
|
|
if (result.filePath == '') {
|
|
return
|
|
}
|
|
if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
|
|
result.filePath += '.soon'
|
|
}
|
|
let fs = require('fs')
|
|
con_o.soonType = 2
|
|
fs.writeFileSync(result.filePath, JSON.stringify(con_o))
|
|
openAs.name = result.filePath
|
|
layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
|
|
saveHistory()
|
|
})
|
|
.catch((err) => {
|
|
console.log()
|
|
})
|
|
})
|
|
function getDate() {
|
|
let date = new Date()
|
|
return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
|
|
}
|
|
function getAbsoluteXY(_obj) {
|
|
let coord = _obj.get('lineCoords')
|
|
//let xs = [], ys = [];
|
|
//for(let item in coord){
|
|
// xs.push(coord[item].x);
|
|
// ys.push(coord[item].y);
|
|
//}
|
|
//xs.sort(function(a,b){return a-b});
|
|
//ys.sort(function(a,b){return a-b});
|
|
//return [xs[0], ys[0]];
|
|
return [_obj.get('left'), _obj.get('top')]
|
|
}
|
|
let fullPath = path.join(exePath, 'data.json')
|
|
function saveHistory() {
|
|
let fs = require('fs')
|
|
let j = {}
|
|
try {
|
|
fsData = fs.readFileSync(fullPath)
|
|
j = JSON.parse(fsData.toString())
|
|
for (let item of j.history) {
|
|
if (item.path == openAs.name) {
|
|
item.time = getDate()
|
|
fs.writeFileSync(fullPath, JSON.stringify(j))
|
|
return
|
|
}
|
|
}
|
|
j.history.push({ time: getDate(), path: openAs.name })
|
|
fs.writeFileSync(fullPath, JSON.stringify(j))
|
|
} catch (e) {
|
|
let j = { history: { time: getDate(), path: openAs.name } }
|
|
fs.writeFileSync(fullPath, JSON.stringify(j))
|
|
}
|
|
}
|
|
function open(file) {
|
|
let fs = require('fs')
|
|
var fsData = fs.readFileSync(file)
|
|
openAs.name = file
|
|
let j = JSON.parse(fsData.toString())
|
|
let left = background_image.left
|
|
let top = background_image.top
|
|
let new_left = j.f.objects[0].left
|
|
let new_top = j.f.objects[0].top
|
|
for (let o of j.f.objects) {
|
|
o.left = o.left - new_left + left
|
|
o.top = o.top - new_top + top
|
|
}
|
|
for (let o of j.b.objects) {
|
|
o.left = o.left - new_left + left
|
|
o.top = o.top - new_top + top
|
|
}
|
|
canvas1.loadFromJSON(j.f)
|
|
canvas2.loadFromJSON(j.b)
|
|
background_image1 = canvas1.getObjects()[0]
|
|
background_image2 = canvas2.getObjects()[0]
|
|
|
|
objs2 = j.bo
|
|
objs1 = j.fo
|
|
step1.val = 0
|
|
step2.val = 0
|
|
recordJson1 = []
|
|
recordJson2 = []
|
|
recordObjs1 = []
|
|
recordObjs2 = []
|
|
if ($('#front_side').hasClass('ui-button-active')) {
|
|
objs = objs1
|
|
recordObjs = recordObjs1
|
|
recordJson = recordJson1
|
|
step = step1
|
|
background_image = background_image1
|
|
} else if ($('#back_side').hasClass('ui-button-active')) {
|
|
objs = objs2
|
|
recordObjs = recordObjs2
|
|
recordJson = recordJson2
|
|
background_image = background_image2
|
|
step = step2
|
|
}
|
|
canvas1.renderAll()
|
|
canvas2.renderAll()
|
|
updateList() /*
|
|
修复打开新文件后无法撤销的bug
|
|
2022-07-16
|
|
*/
|
|
setTimeout(() => {
|
|
recordObjs1.push(JSON.stringify(objs1))
|
|
let j1 = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
|
|
j1.objects[0].hoverCursor = 'default'
|
|
recordJson1.push(j1)
|
|
|
|
recordObjs2.push(JSON.stringify(objs2))
|
|
let j2 = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
|
|
j2.objects[0].hoverCursor = 'default'
|
|
recordJson2.push(j2)
|
|
}, 0)
|
|
}
|
|
$('#open').click(function () {
|
|
if (step.val == 0) {
|
|
OpenDialog();
|
|
return;
|
|
}
|
|
layer.confirm(
|
|
'<font style="color:black">' + language_str('whetherSave') + '</font>',
|
|
function (index) {
|
|
//confirm 是否保存当前文件？
|
|
//let j = canvas1.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]);
|
|
//let b = canvas2.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]);
|
|
//let o = { f : j, b : b,fo : objs1, bo : objs2};
|
|
//if(openAs != ""){
|
|
// //打开的文件
|
|
// let fs = require('fs')
|
|
// fs.writeFileSync(openAs,JSON.stringify(o))
|
|
// layer.msg('保存成功至'+ openAs);
|
|
//
|
|
// OpenDialog();return;
|
|
//}
|
|
//dialog.showSaveDialog({
|
|
// title:'保存文件',
|
|
// filters: [
|
|
// { name: 'FCS File Type', extensions: ['fcs'] },
|
|
// ]
|
|
//}).then(result=>{
|
|
// let fs = require('fs')
|
|
// fs.writeFileSync(result.filePath,JSON.stringify(o))
|
|
//
|
|
// OpenDialog();
|
|
//}).catch(err=>{
|
|
// console.log()
|
|
//})
|
|
/*
|
|
let j = canvas1.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]);
|
|
let b = canvas2.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]);
|
|
let _g1 = [], _g2 = [];
|
|
let left = 0, top = 0;
|
|
for( let _o of canvas1.getObjects() ){
|
|
if( getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left){
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if( getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top){
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
_g1.push(fabric.util.object.clone(_o));
|
|
}
|
|
let fp = new fabric.Group(_g1).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top:top/zoom,
|
|
left:left/zoom
|
|
});
|
|
left = 0, top = 0;
|
|
for( let _o of canvas2.getObjects() ){
|
|
if( getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left){
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()));
|
|
}
|
|
if( getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top){
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()));
|
|
}
|
|
_g2.push(fabric.util.object.clone(_o));
|
|
}
|
|
//let fp = new fabric.Group(_g1).toDataURL();
|
|
let bp = new fabric.Group(_g2).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top:top/zoom,
|
|
left:left/zoom
|
|
});
|
|
let o = { f : j, b : b,fo : objs1, bo : objs2,fp:fp,bp:bp};
|
|
if(openAs.name != ""){
|
|
//打开的文件
|
|
let fs = require('fs')
|
|
fs.writeFileSync(openAs.name,JSON.stringify(o))
|
|
layer.msg(language_str("saveSucc")+ openAs.name);//'保存成功至'
|
|
saveHistory();
|
|
|
|
OpenDialog();
|
|
return;
|
|
}
|
|
dialog.showSaveDialog({
|
|
title:language_str("saveFile"),//'保存文件'
|
|
filters: [
|
|
{ name: 'Soon File Type', extensions: ['soon'] },
|
|
]
|
|
}).then(result=>{
|
|
if(result.canceled)return;
|
|
if(result.filePath.substring(result.filePath.length-5).indexOf('.') == -1){
|
|
result.filePath += '.soon';
|
|
}
|
|
let fs = require('fs')
|
|
fs.writeFileSync(result.filePath,JSON.stringify(o))
|
|
openAs.name = result.filePath;
|
|
layer.msg(language_str("saveSucc")+ openAs.name);//'保存成功至'
|
|
saveHistory();
|
|
OpenDialog();
|
|
}).catch(err=>{
|
|
console.log()
|
|
})
|
|
*/
|
|
output(OpenDialog)
|
|
layer.close(index)
|
|
},
|
|
function (index) {
|
|
OpenDialog()
|
|
}
|
|
)
|
|
function OpenDialog() {
|
|
dialog
|
|
.showOpenDialog({
|
|
title: '请选择文件', //confirm
|
|
buttonLabel: language_str('comf'), //"确认"
|
|
filters: [{ name: 'Soon File Type', extensions: ['soon'] }]
|
|
})
|
|
.then((result) => {
|
|
if (result.canceled) return
|
|
//console.log(result.filePaths)
|
|
let fs = require('fs')
|
|
var fsData = fs.readFileSync(result.filePaths[0])
|
|
openAs.name = result.filePaths[0]
|
|
let j = JSON.parse(fsData.toString())
|
|
let left = background_image.left
|
|
let top = background_image.top
|
|
let new_left = j.f.objects[0].left
|
|
let new_top = j.f.objects[0].top
|
|
for (let o of j.f.objects) {
|
|
o.left = o.left - new_left + left
|
|
o.top = o.top - new_top + top
|
|
}
|
|
for (let o of j.b.objects) {
|
|
o.left = o.left - new_left + left
|
|
o.top = o.top - new_top + top
|
|
}
|
|
canvas1.loadFromJSON(j.f)
|
|
canvas2.loadFromJSON(j.b)
|
|
background_image1 = canvas1.getObjects()[0]
|
|
background_image2 = canvas2.getObjects()[0]
|
|
|
|
objs2 = j.bo
|
|
objs1 = j.fo
|
|
step1.val = 0
|
|
step2.val = 0
|
|
recordJson1 = []
|
|
recordJson2 = []
|
|
recordObjs1 = []
|
|
recordObjs2 = []
|
|
if ($('#front_side').hasClass('ui-button-active')) {
|
|
objs = objs1
|
|
recordObjs = recordObjs1
|
|
recordJson = recordJson1
|
|
step = step1
|
|
background_image = background_image1
|
|
} else if ($('#back_side').hasClass('ui-button-active')) {
|
|
objs = objs2
|
|
recordObjs = recordObjs2
|
|
recordJson = recordJson2
|
|
background_image = background_image2
|
|
step = step2
|
|
}
|
|
canvas1.renderAll()
|
|
canvas2.renderAll()
|
|
updateList()
|
|
/*
|
|
修复打开新文件后无法撤销的bug
|
|
2022-07-16
|
|
*/
|
|
setTimeout(() => {
|
|
recordObjs1.push(JSON.stringify(objs1))
|
|
let j1 = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
|
|
j1.objects[0].hoverCursor = 'default'
|
|
recordJson1.push(j1)
|
|
|
|
recordObjs2.push(JSON.stringify(objs2))
|
|
let j2 = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
|
|
j2.objects[0].hoverCursor = 'default'
|
|
recordJson2.push(j2)
|
|
}, 0)
|
|
})
|
|
.catch((err) => {
|
|
console.log(err)
|
|
})
|
|
}
|
|
})
|
|
function clearAll() {
|
|
//let blank = "{\"f\":{\"version\":\"4.6.0\",\"objects\":[{\"type\":\"image\",\"version\":\"4.6.0\",\"originX\":\"left\",\"originY\":\"top\",\"left\":253.5,\"top\":121.5,\"width\":1012,\"height\":648,\"fill\":\"#000000\",\"stroke\":null,\"strokeWidth\":0,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeDashOffset\":0,\"strokeLineJoin\":\"miter\",\"strokeUniform\":false,\"strokeMiterLimit\":4,\"scaleX\":1,\"scaleY\":1,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"paintFirst\":\"fill\",\"globalCompositeOperation\":\"source-over\",\"skewX\":0,\"skewY\":0,\"cropX\":0,\"cropY\":0,\"selectable\":false,\"hoverable\":false,\"hoverCursor\":\"default\",\"src\":\"data:image/png;base64,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YFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIEDpfCiFAAAcY0lEQVSAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMT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\",\"crossOrigin\":null,\"filters\":[]}],\"hoverCursor\":\"move\"},\"b\":{\"version\":\"4.6.0\",\"objects\":[{\"type\":\"image\",\"version\":\"4.6.0\",\"originX\":\"left\",\"originY\":\"top\",\"left\":253.5,\"top\":121.5,\"width\":1012,\"height\":648,\"fill\":\"rgb(0,0,0)\",\"stroke\":null,\"strokeWidth\":0,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeDashOffset\":0,\"strokeLineJoin\":\"miter\",\"strokeUniform\":false,\"strokeMiterLimit\":4,\"scaleX\":1,\"scaleY\":1,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"paintFirst\":\"fill\",\"globalCompositeOperation\":\"source-over\",\"skewX\":0,\"skewY\":0,\"cropX\":0,\"cropY\":0,\"selectable\":false,\"hoverable\":false,\"hoverCursor\":\"default\",\"src\":\"data:image/png;base64,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YFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIEDpfCiFAAAcY0lEQVSAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMT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\",\"crossOrigin\":null,\"filters\":[]}],\"hoverCursor\":\"move\"},\"fo\":[],\"bo\":[]}";
|
|
//let j = JSON.parse(blank);
|
|
//canvas1.setZoom(1);
|
|
//canvas2.setZoom(1);
|
|
//canvas1.loadFromJSON(j.f);
|
|
//canvas2.loadFromJSON(j.b);
|
|
let t_objs1 = canvas1.getObjects()
|
|
let t_objs2 = canvas2.getObjects()
|
|
for (let i = 1; i < t_objs1.length; i++) {
|
|
canvas1.remove(t_objs1[i])
|
|
}
|
|
for (let i = 1; i < t_objs2.length; i++) {
|
|
canvas2.remove(t_objs2[i])
|
|
}
|
|
objs2 = []
|
|
objs1 = []
|
|
step1.val = 0
|
|
step2.val = 0
|
|
recordJson1 = []
|
|
recordJson2 = []
|
|
recordObjs1 = []
|
|
recordObjs2 = []
|
|
if ($('#front_side').hasClass('ui-button-active')) {
|
|
objs = objs1
|
|
recordObjs = recordObjs1
|
|
recordJson = recordJson1
|
|
step = step1
|
|
} else if ($('#back_side').hasClass('ui-button-active')) {
|
|
objs = objs2
|
|
recordObjs = recordObjs2
|
|
recordJson = recordJson2
|
|
step = step2
|
|
}
|
|
openAs.name = ''
|
|
canvas1.renderAll()
|
|
canvas2.renderAll()
|
|
updateList()
|
|
console.log()
|
|
}
|
|
$('#new').click(function () {
|
|
if (step.val == 0) {
|
|
ipcRenderer.send('open-first-page');
|
|
return;
|
|
}
|
|
layer.confirm(
|
|
'<font style="color:black">' + language_str('whetherSave') + '</font>',
|
|
function (index) {
|
|
//confirm 是否保存当前文件？
|
|
output(() => ipcRenderer.send('open-first-page'))
|
|
return
|
|
let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
|
|
let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
|
|
let _g1 = [],
|
|
_g2 = []
|
|
let left = 0,
|
|
top = 0
|
|
for (let _o of canvas1.getObjects()) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
_g1.push(fabric.util.object.clone(_o))
|
|
}
|
|
let fp = new fabric.Group(_g1).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: top / zoom,
|
|
left: left / zoom
|
|
})
|
|
; (left = 0), (top = 0)
|
|
for (let _o of canvas2.getObjects()) {
|
|
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
|
|
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
|
|
}
|
|
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
|
|
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
|
|
}
|
|
_g2.push(fabric.util.object.clone(_o))
|
|
}
|
|
//let fp = new fabric.Group(_g1).toDataURL();
|
|
let bp = new fabric.Group(_g2).toDataURL({
|
|
height: 648,
|
|
width: 1012,
|
|
top: top / zoom,
|
|
left: left / zoom
|
|
})
|
|
let o = { f: j, b: b, fo: objs1, bo: objs2, fp: fp, bp: bp }
|
|
if (openAs.name != '') {
|
|
//打开的文件
|
|
let fs = require('fs')
|
|
fs.writeFileSync(openAs.name, JSON.stringify(o))
|
|
layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
|
|
/*
|
|
2022-07-16 直接跳转至首页
|
|
*/
|
|
ipcRenderer.send('open-first-page')
|
|
//saveHistory();
|
|
//clearAll();
|
|
return
|
|
}
|
|
dialog
|
|
.showSaveDialog({
|
|
title: language_str('saveFile'), //'保存文件'
|
|
filters: [{ name: 'Soon File Type', extensions: ['soon'] }]
|
|
})
|
|
.then((result) => {
|
|
if (result.filePath == '') {
|
|
return
|
|
}
|
|
if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
|
|
result.filePath += '.soon'
|
|
}
|
|
let fs = require('fs')
|
|
o.soonType = 2
|
|
fs.writeFileSync(result.filePath, JSON.stringify(o))
|
|
openAs.name = result.filePath
|
|
layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
|
|
/*
|
|
2022-07-16 直接跳转至首页
|
|
*/
|
|
ipcRenderer.send('open-first-page')
|
|
//saveHistory();
|
|
//clearAll();
|
|
})
|
|
.catch((err) => {
|
|
console.log()
|
|
})
|
|
layer.close(index)
|
|
},
|
|
function (index) {
|
|
/*
|
|
2022-07-16 直接跳转至首页
|
|
*/
|
|
//clearAll();
|
|
ipcRenderer.send('open-first-page')
|
|
}
|
|
)
|
|
})
|
|
function chagneTitle() { }
|
|
function addBackground() {
|
|
// 类型改变
|
|
fabric.Image.fromURL('./public/images/bg_front_2.png', function (image) {
|
|
//image.set("scaleX",$("#canvas-div").width() / 1200 < 1 ? $("#canvas-div").width() / 1200 : 1)
|
|
//image.set("scaleY",$("#canvas-div").width() / 1200 < 1 ? $("#canvas-div").width() / 1200 : 1)
|
|
|
|
image.left = ($('#canvas1').width() - image.width * image.get('scaleX')) / 2
|
|
image.top = ($('#canvas1').height() - image.height * image.get('scaleY')) / 2
|
|
|
|
image.selectable = false
|
|
image.hoverable = false
|
|
image.hoverCursor = 'default'
|
|
image.setSrc(image.toDataURL(), function (image) {
|
|
background_image1 = image
|
|
background_image = background_image1
|
|
canvas.add(image)
|
|
canvas.renderAll()
|
|
//pre_objs1.push(JSON.stringify(objs1));
|
|
//pre_json1.push(canvas1.toJSON(["selectable","hoverable","hoverCursor"]));
|
|
|
|
recordObjs1.push(JSON.stringify(objs1))
|
|
recordJson1.push(canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline']))
|
|
})
|
|
// 类型改变
|
|
fabric.Image.fromURL('./public/images/bg_back_2.png', function (image) {
|
|
image.left = ($('#canvas2').width() - image.width) / 2
|
|
image.top = ($('#canvas2').height() - image.height) / 2
|
|
|
|
image.selectable = false
|
|
image.hoverable = false
|
|
image.hoverCursor = 'default'
|
|
|
|
image.setSrc(image.toDataURL(), function (image) {
|
|
background_image2 = image
|
|
canvas2.add(image)
|
|
canvas2.renderAll()
|
|
//pre_objs2.push(JSON.stringify(objs2));
|
|
//pre_json2.push(canvas2.toJSON(["selectable","hoverable","hoverCursor"]));
|
|
|
|
recordObjs2.push(JSON.stringify(objs2))
|
|
recordJson2.push(canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline']))
|
|
|
|
let file = GetFile().get('file')
|
|
console.log(file)
|
|
if (file && file != 'empty') {
|
|
open(file)
|
|
}
|
|
})
|
|
})
|
|
is_bgi_add = true
|
|
})
|
|
}
|
|
function selectObject(target, index) {
|
|
updateControls()
|
|
|
|
$('#base_control').show()
|
|
//$("#text_x").val((target.left - background_image.left).toFixed(1));
|
|
//$("#text_y").val((target.top - background_image.top).toFixed(1));
|
|
//$("#text_w").val(parseFloat(target.get("scaleX") * target.get("width")).toFixed(1));
|
|
//$("#text_h").val(parseFloat(target.get("scaleY") * target.get("height")).toFixed(1));
|
|
//$("#text_r").val(target.get("angle").toFixed(0));
|
|
}
|
|
function updateControls() {
|
|
$('#text_r').val(canvas.getActiveObject().get('angle').toFixed(0))
|
|
$('#text_x').val((canvas.getActiveObject().get('left') - background_image.left).toFixed(0))
|
|
$('#text_y').val((canvas.getActiveObject().get('top') - background_image.top).toFixed(0))
|
|
$('#text_h').val((canvas.getActiveObject().get('scaleY') * canvas.getActiveObject().get('height')).toFixed(0))
|
|
$('#text_w').val((canvas.getActiveObject().get('scaleX') * canvas.getActiveObject().get('width')).toFixed(0))
|
|
if (canvas.getActiveObject().get('selectable')) {
|
|
$('#lock_img').attr('src', 'public/images/unlock20.png') //已经上锁，需要解锁
|
|
} else {
|
|
$('#lock_img').attr('src', 'public/images/lock20.png') //没上锁，可以上锁
|
|
}
|
|
}
|
|
function checkName(name) {
|
|
//检查字段名是否重复了
|
|
for (let item of objs1) {
|
|
if (item.name == name) {
|
|
return false
|
|
}
|
|
}
|
|
for (let item of objs2) {
|
|
if (item.name == name) {
|
|
return false
|
|
}
|
|
}
|
|
return true
|
|
}
|
|
function resName(pre_name) {
|
|
//返回的是不重复的字段名
|
|
let num = objs1.length + objs2.length - 1
|
|
do {
|
|
num++
|
|
} while (!checkName(pre_name + num)) //重复了就再加1
|
|
return pre_name + num
|
|
}
|
|
function addPic(pointer) {
|
|
pre_add_image.left = pointer.x
|
|
pre_add_image.top = pointer.y
|
|
|
|
canvas.add(pre_add_image)
|
|
|
|
objs.push({ type: 1, black: false })
|
|
canvas.renderAll()
|
|
updateList()
|
|
recordState()
|
|
//OpenDialog();
|
|
//function OpenDialog()
|
|
//{
|
|
// dialog.showOpenDialog({
|
|
// title: "请选择图片",
|
|
// buttonLabel: "确认",
|
|
// filters: [
|
|
// { name: 'Image File Type', extensions: ['png', 'jpg'] },
|
|
// ]
|
|
// }).then(result => {
|
|
// if(result.canceled)return;
|
|
// //console.log(result.filePaths)
|
|
// fabric.Image.fromURL(result.filePaths[0], function(image) {
|
|
// image.left = pointer.x;
|
|
// image.top = pointer.y;
|
|
//
|
|
// canvas.add(image);
|
|
// objs.push({type: 1});
|
|
// canvas.renderAll();
|
|
// updateList();
|
|
// recordState();
|
|
// } );
|
|
// }).catch(err => {
|
|
// console.log(err)
|
|
// })
|
|
//}
|
|
}
|
|
function selectPic(target, index) {
|
|
//透明度
|
|
|
|
$('#pic_control').show()
|
|
pic_op.setValue(100 - canvas.getActiveObject().get('opacity') * 100)
|
|
|
|
let idx = getIndex(canvas.getActiveObject())
|
|
// $("#pic_black").prop("checked", objs[idx-1].black ? 'checked' : '');
|
|
|
|
$('#out_pic_control').hide()
|
|
$('#text_control').hide()
|
|
$('#out_text_control').hide()
|
|
$('#rect_control').hide()
|
|
$('#circle_control').hide()
|
|
$('#line_control').hide()
|
|
$('#counter_control').hide()
|
|
$('#qrcode_Controll').hide()
|
|
$('#barcode_controll').hide()
|
|
}
|
|
function addOutPic(pointer) {
|
|
fabric.Image.fromURL('./public/images/outpic_extra.png', function (image) {
|
|
let width = canvas.getWidth()
|
|
let height = canvas.getHeight()
|
|
image.left = pointer.x
|
|
image.top = pointer.y
|
|
image.opacity = 1
|
|
//image.on("selected",function(){//test well
|
|
// console.log(222);
|
|
//});
|
|
image.setSrc(image.toDataURL(), function (image) {
|
|
canvas.add(image)
|
|
objs.push({ type: 2, name: resName('OUT_PIC_'), black: false })
|
|
canvas.renderAll()
|
|
updateList()
|
|
recordState()
|
|
})
|
|
})
|
|
}
|
|
function selectOutPic(target, index) {
|
|
//字段名
|
|
$('#out_pic_control').show()
|
|
out_pic_op.setValue(100 - canvas.getActiveObject().get('opacity') * 100)
|
|
let idx = getIndex(canvas.getActiveObject())
|
|
$('#out_pic_field_name').val(objs[idx - 1].name)
|
|
// $("#out_pic_black").prop("checked", objs[idx-1].black ? 'checked' : '');
|
|
|
|
$('#pic_control').hide()
|
|
$('#text_control').hide()
|
|
$('#out_text_control').hide()
|
|
$('#rect_control').hide()
|
|
$('#circle_control').hide()
|
|
$('#line_control').hide()
|
|
$('#counter_control').hide()
|
|
$('#qrcode_Controll').hide()
|
|
$('#barcode_controll').hide()
|
|
}
|
|
|
|
function addText(pointer) {
|
|
let text = new fabric.IText('TEXT', {
|
|
//源：文本
|
|
left: pointer.x,
|
|
top: pointer.y,
|
|
fill: '#000000',
|
|
textBackgroundColor: '',
|
|
fontStyle: 'normal',
|
|
fontWeight: 'normal',
|
|
underline: false,
|
|
linethrough: false,
|
|
fontFamily: 'Arial'
|
|
})
|
|
text.setControlVisible('ml', false)
|
|
text.setControlVisible('mt', false)
|
|
text.setControlVisible('mr', false)
|
|
text.setControlVisible('mb', false)
|
|
canvas.add(text)
|
|
objs.push({ type: 3, black: false })
|
|
canvas.renderAll()
|
|
updateList()
|
|
recordState()
|
|
}
|
|
function selectText() {
|
|
//console.log(canvas.getActiveObject().get("fontFamily"));
|
|
$('#text_control').show()
|
|
$('#text_color').val(canvas.getActiveObject().get('fill'))
|
|
$('#text_back_color').val(canvas.getActiveObject().get('textBackgroundColor') == '' ? '#ffffff' : canvas.getActiveObject().get('textBackgroundColor'))
|
|
$('#text_size').val(canvas.getActiveObject().get('fontSize'))
|
|
$('#text_text').val(canvas.getActiveObject().get('text'))
|
|
$('#text_font_family').val(canvas.getActiveObject().get('fontFamily'))
|
|
|
|
if (canvas.getActiveObject().get('underline') == true) {
|
|
$('#text_underline').addClass('ui-radio-acitve')
|
|
} else {
|
|
$('#text_underline').removeClass('ui-radio-acitve')
|
|
}
|
|
if (canvas.getActiveObject().get('fontWeight') == 'bold') {
|
|
$('#text_bold').addClass('ui-radio-acitve')
|
|
} else {
|
|
$('#text_bold').removeClass('ui-radio-acitve')
|
|
}
|
|
if (canvas.getActiveObject().get('fontStyle') == 'italic') {
|
|
$('#text_italics').addClass('ui-radio-acitve')
|
|
} else {
|
|
$('#text_italics').removeClass('ui-radio-acitve')
|
|
}
|
|
if (canvas.getActiveObject().get('linethrough') == true) {
|
|
$('#text_linethrough').addClass('ui-radio-acitve')
|
|
} else {
|
|
$('#text_linethrough').removeClass('ui-radio-acitve')
|
|
}
|
|
$('#pic_control').hide()
|
|
$('#out_pic_control').hide()
|
|
$('#out_text_control').hide()
|
|
$('#rect_control').hide()
|
|
$('#circle_control').hide()
|
|
$('#line_control').hide()
|
|
$('#counter_control').hide()
|
|
$('#qrcode_Controll').hide()
|
|
$('#barcode_controll').hide()
|
|
}
|
|
function addOutText(pointer) {
|
|
//MERGE_TEXT_1
|
|
let text = new fabric.Text('MERGE TEXT', {
|
|
//源：合成文本
|
|
left: pointer.x,
|
|
top: pointer.y,
|
|
fill: '#000000',
|
|
fontStyle: 'normal',
|
|
fontWeight: 'normal',
|
|
textBackgroundColor: '',
|
|
underline: false,
|
|
linethrough: false,
|
|
fontFamily: 'Arial'
|
|
})
|
|
|
|
//text.on({
|
|
// 'scaling': function(e) {
|
|
// var obj = this,
|
|
// w = obj.width * obj.scaleX,
|
|
// h = obj.height * obj.scaleY;
|
|
//
|
|
// obj.set({
|
|
// 'height' : h,
|
|
// 'width' : w,
|
|
// 'scaleX' : 1,
|
|
// 'scaleY' : 1
|
|
// });
|
|
// }
|
|
//});
|
|
text.setControlVisible('ml', false)
|
|
text.setControlVisible('mt', false)
|
|
text.setControlVisible('mr', false)
|
|
text.setControlVisible('mb', false)
|
|
|
|
canvas.add(text)
|
|
objs.push({ type: 4, name: resName('OUT_TEXT_'), exceed: false, autoWrap: false, fixSize: false, black: false })
|
|
canvas.renderAll()
|
|
updateList()
|
|
recordState()
|
|
}
|
|
function selectOutText() {
|
|
//color
|
|
//size
|
|
$('#out_text_control').show()
|
|
$('#out_text_color').val(canvas.getActiveObject().get('fill'))
|
|
$('#out_text_text').val(canvas.getActiveObject().get('text'))
|
|
$('#out_text_size').val(canvas.getActiveObject().get('fontSize'))
|
|
$('#out_text_back_color').val(canvas.getActiveObject().get('textBackgroundColor') == '' ? '#ffffff' : canvas.getActiveObject().get('textBackgroundColor'))
|
|
let idx = getIndex(canvas.getActiveObject())
|
|
$('#out_text_field_name').val(objs[idx - 1].name)
|
|
$('#out_text_font_family').val(canvas.getActiveObject().get('fontFamily'))
|
|
$('#exceed').prop('checked', objs[idx - 1].exceed ? 'checked' : '')
|
|
$('#autoWrap').prop('checked', objs[idx - 1].autoWrap ? 'checked' : '')
|
|
$('#fixSize').prop('checked', objs[idx - 1].fixSize ? 'checked' : '')
|
|
if (canvas.getActiveObject().get('underline') == true) {
|
|
$('#out_text_underline').addClass('ui-radio-acitve')
|
|
} else {
|
|
$('#out_text_underline').removeClass('ui-radio-acitve')
|
|
}
|
|
if (canvas.getActiveObject().get('fontWeight') == 'bold') {
|
|
$('#out_text_bold').addClass('ui-radio-acitve')
|
|
} else {
|
|
$('#out_text_bold').removeClass('ui-radio-acitve')
|
|
}
|
|
if (canvas.getActiveObject().get('fontStyle') == 'italic') {
|
|
$('#out_text_italics').addClass('ui-radio-acitve')
|
|
} else {
|
|
$('#out_text_italics').removeClass('ui-radio-acitve')
|
|
}
|
|
if (canvas.getActiveObject().get('linethrough') == true) {
|
|
$('#out_text_linethrough').addClass('ui-radio-acitve')
|
|
} else {
|
|
$('#out_text_linethrough').removeClass('ui-radio-acitve')
|
|
}
|
|
|
|
$('#pic_control').hide()
|
|
$('#out_pic_control').hide()
|
|
$('#text_control').hide()
|
|
$('#rect_control').hide()
|
|
$('#circle_control').hide()
|
|
$('#line_control').hide()
|
|
$('#counter_control').hide()
|
|
$('#qrcode_Controll').hide()
|
|
$('#barcode_controll').hide()
|
|
}
|
|
function addRect(pointer) {
|
|
let rect = new fabric.Rect({
|
|
left: pointer.x,
|
|
top: pointer.y,
|
|
fill: '#006834',
|
|
stroke: '#416666',
|
|
strokeWidth: 0,
|
|
width: 100,
|
|
height: 100
|
|
})
|
|
canvas.add(rect)
|
|
objs.push({ type: 5, black: false })
|
|
canvas.renderAll()
|
|
updateList()
|
|
recordState()
|
|
}
|
|
function selectRect() {
|
|
//color
|
|
$('#rect_control').show()
|
|
$('#rect_color').val(canvas.getActiveObject().get('fill') == '' ? '#ffffff' : canvas.getActiveObject().get('fill'))
|
|
$('#rect_stroke').val(canvas.getActiveObject().get('stroke') == '' ? '#ffffff' : canvas.getActiveObject().get('stroke'))
|
|
$('#rect_stroke_width').val(canvas.getActiveObject().get('strokeWidth'))
|
|
$('#rect_radius').val(canvas.getActiveObject().get('rx'))
|
|
rect_op.setValue(100 - canvas.getActiveObject().get('opacity') * 100)
|
|
let a = canvas.getActiveObject().getCoords()
|
|
console.log(getCoordsMinX(a))
|
|
$('#pic_control').hide()
|
|
$('#out_pic_control').hide()
|
|
$('#text_control').hide()
|
|
$('#out_text_control').hide()
|
|
$('#circle_control').hide()
|
|
$('#line_control').hide()
|
|
$('#counter_control').hide()
|
|
$('#qrcode_Controll').hide()
|
|
$('#barcode_controll').hide()
|
|
}
|
|
function addCircle(pointer) {
|
|
let circle = new fabric.Circle({
|
|
left: pointer.x,
|
|
top: pointer.y,
|
|
fill: '',
|
|
stroke: '#006834',
|
|
strokeWidth: 3,
|
|
radius: 50,
|
|
strokeUniform: true
|
|
})
|
|
canvas.add(circle)
|
|
objs.push({ type: 6, black: false })
|
|
canvas.renderAll()
|
|
updateList()
|
|
recordState()
|
|
}
|
|
function selectCircle() {
|
|
//border-color
|
|
//color
|
|
$('#circle_control').show()
|
|
$('#circle_color').val(canvas.getActiveObject().get('fill') == '' ? '#ffffff' : canvas.getActiveObject().get('fill'))
|
|
$('#circle_stroke').val(canvas.getActiveObject().get('stroke') == '' ? '#ffffff' : canvas.getActiveObject().get('stroke'))
|
|
$('#circle_stroke_width').val(canvas.getActiveObject().get('strokeWidth'))
|
|
circle_op.setValue(100 - canvas.getActiveObject().get('opacity') * 100)
|
|
$('#pic_control').hide()
|
|
$('#out_pic_control').hide()
|
|
$('#text_control').hide()
|
|
$('#out_text_control').hide()
|
|
$('#rect_control').hide()
|
|
$('#line_control').hide()
|
|
$('#counter_control').hide()
|
|
$('#qrcode_Controll').hide()
|
|
$('#barcode_controll').hide()
|
|
}
|
|
function addLine(pointer) {
|
|
let line = new fabric.Line([50, 100, 200, 100], {
|
|
left: pointer.x,
|
|
top: pointer.y,
|
|
stroke: '#ff0000',
|
|
strokeWidth: 3,
|
|
strokeDashArray: [0, 0]
|
|
})
|
|
|
|
line.setControlVisible('tl', false)
|
|
line.setControlVisible('tr', false)
|
|
line.setControlVisible('br', false)
|
|
line.setControlVisible('bl', false)
|
|
line.setControlVisible('mt', false)
|
|
line.setControlVisible('mb', false)
|
|
canvas.add(line)
|
|
objs.push({ type: 7, black: false })
|
|
canvas.renderAll()
|
|
updateList()
|
|
recordState()
|
|
}
|
|
function selectLine() {
|
|
//color
|
|
//weight
|
|
$('#line_control').show()
|
|
|
|
let idx = getIndex(canvas.getActiveObject())
|
|
$('#line_color').val(canvas.getActiveObject().get('stroke'))
|
|
$('#line_dist').val(canvas.getActiveObject().get('strokeDashArray')[0])
|
|
$('#text_h').val(canvas.getActiveObject().get('strokeWidth'))
|
|
|
|
$('#pic_control').hide()
|
|
$('#out_pic_control').hide()
|
|
$('#text_control').hide()
|
|
$('#out_text_control').hide()
|
|
$('#rect_control').hide()
|
|
$('#circle_control').hide()
|
|
$('#counter_control').hide()
|
|
$('#qrcode_Controll').hide()
|
|
$('#barcode_controll').hide()
|
|
}
|
|
function addQrCode(pointer) {
|
|
let qr = jrQrcode.getQrBase64('https://www.cardsoon.com', { padding: 0 })
|
|
fabric.Image.fromURL(qr, function (image) {
|
|
image.left = pointer.x
|
|
image.top = pointer.y
|
|
canvas.add(image)
|
|
objs.push({ type: 8, name: resName('QR_CODE_'), color: '#000000', val: 'http://www.cardsoon.com', black: false })
|
|
canvas.renderAll()
|
|
updateList()
|
|
recordState()
|
|
})
|
|
}
|
|
function selectQrCode() {
|
|
//字段名
|
|
//background-color
|
|
//color
|
|
$('#qrcode_Controll').show()
|
|
let idx = getIndex(canvas.getActiveObject())
|
|
$('#qrcode_field_name').val(objs[idx - 1].name)
|
|
$('#qrcode_color').val(objs[idx - 1].color)
|
|
$('#qrcode_val').val(objs[idx - 1].val)
|
|
$('#line_control').hide()
|
|
$('#pic_control').hide()
|
|
$('#out_pic_control').hide()
|
|
$('#text_control').hide()
|
|
$('#out_text_control').hide()
|
|
$('#rect_control').hide()
|
|
$('#circle_control').hide()
|
|
$('#counter_control').hide()
|
|
$('#barcode_controll').hide()
|
|
}
|
|
function addBarCode(pointer) {
|
|
JsBarcode('#barcode', '123456789', { margin: 0, lineColor: '#000000', fontSize: 18, font: 'Arial' })
|
|
let barcode = document.getElementById('barcode')
|
|
let bar = barcode.toDataURL('image/png')
|
|
fabric.Image.fromURL(bar, function (image) {
|
|
image.left = pointer.x
|
|
image.top = pointer.y
|
|
|
|
canvas.add(image)
|
|
objs.push({ type: 9, name: resName('BAR_CODE_'), val: '123456789', color: '#000000', fontSize: 18, font: 'Arial', show: false, black: false }) //show是取消文字显示
|
|
canvas.renderAll()
|
|
updateList()
|
|
recordState()
|
|
})
|
|
}
|
|
function selectBarCode() {
|
|
//字段名
|
|
//background-color
|
|
//color
|
|
$('#barcode_controll').show()
|
|
let idx = getIndex(canvas.getActiveObject())
|
|
$('#barcode_field_name').val(objs[idx - 1].name)
|
|
$('#barcode_font_family').val(objs[idx - 1].font)
|
|
$('#barcode_size').val(objs[idx - 1].fontSize)
|
|
$('#barcode_val').val(objs[idx - 1].val)
|
|
$('#barcode_show').prop('checked', objs[idx - 1].show ? 'checked' : '')
|
|
$('#line_control').hide()
|
|
$('#pic_control').hide()
|
|
$('#out_pic_control').hide()
|
|
$('#text_control').hide()
|
|
$('#out_text_control').hide()
|
|
$('#rect_control').hide()
|
|
$('#circle_control').hide()
|
|
$('#counter_control').hide()
|
|
$('#qrcode_Controll').hide()
|
|
}
|
|
function addCounter(pointer) {
|
|
let text = new fabric.Text('0', {
|
|
left: pointer.x,
|
|
top: pointer.y,
|
|
fill: '#000000'
|
|
})
|
|
canvas.add(text)
|
|
objs.push({ type: 10, name: resName('COUNTER_'), start: 0, add: 1, black: false })
|
|
canvas.renderAll()
|
|
updateList()
|
|
recordState()
|
|
console.log(canvas.getObjects())
|
|
}
|
|
function selectCounter() {
|
|
//起始
|
|
//终止
|
|
//增量
|
|
$('#counter_control').show()
|
|
|
|
let idx = getIndex(canvas.getActiveObject())
|
|
$('#counter_start').val(objs[idx - 1].start)
|
|
$('#counter_add').val(objs[idx - 1].add)
|
|
$('#counter_color').val(canvas.getActiveObject().get('fill'))
|
|
$('#count_font_family').val(canvas.getActiveObject().get('fontFamily'))
|
|
$('#count_size').val(canvas.getActiveObject().get('fontSize'))
|
|
|
|
$('#line_control').hide()
|
|
$('#pic_control').hide()
|
|
$('#out_pic_control').hide()
|
|
$('#text_control').hide()
|
|
$('#out_text_control').hide()
|
|
$('#rect_control').hide()
|
|
$('#circle_control').hide()
|
|
$('#qrcode_Controll').hide()
|
|
$('#barcode_controll').hide()
|
|
}
|
|
function getIndex(target, _canvas = null) {
|
|
let temp_objs
|
|
if (_canvas == null) {
|
|
temp_objs = canvas.getObjects()
|
|
} else {
|
|
temp_objs = _canvas.getObjects()
|
|
}
|
|
|
|
let i = 0
|
|
for (let res of temp_objs) {
|
|
if (target == res) {
|
|
return i
|
|
}
|
|
i++
|
|
}
|
|
return 0
|
|
}
|
|
function getType(target) {
|
|
let temp_objs = canvas.getObjects()
|
|
let i = 0
|
|
for (let res of temp_objs) {
|
|
if (target == res) {
|
|
return objs[i].type
|
|
}
|
|
i++
|
|
}
|
|
}
|
|
|
|
function updateList() {
|
|
let str = ''
|
|
let i = 0
|
|
for (let item of objs) {
|
|
switch (item.type) {
|
|
case 1 /* 2022-06-14修改*/:
|
|
str = '<div><img src="public/images/images.svg" id=\'obj' + i + "'/>IMG_" + i + '</div>' + str
|
|
break
|
|
case 2:
|
|
str = '<div><img src="public/images/images_add.svg" id=\'obj' + i + "'/>" + item.name + '</div>' + str
|
|
break
|
|
case 3:
|
|
str = '<div><img src="public/images/text.svg" id=\'obj' + i + "'/>" + 'TEXT_' + i + '</div>' + str
|
|
break
|
|
case 4:
|
|
str = '<div><img src="public/images/text2.svg" id=\'obj' + i + "'/>" + item.name + '</div>' + str
|
|
break
|
|
case 5:
|
|
str = '<div><img src="public/images/rect.svg" id=\'obj' + i + "'/>RECT_" + i + '</div>' + str
|
|
break
|
|
case 6:
|
|
str = '<div><img src="public/images/round.svg" id=\'obj' + i + "'/>CIRCLE_" + i + '</div>' + str
|
|
break
|
|
case 7:
|
|
str = '<div><img src="public/images/line.svg" id=\'obj' + i + "'/>LINE_" + i + '</div>' + str
|
|
break
|
|
case 8:
|
|
str = '<div><img src="public/images/qrcode.svg" id=\'obj' + i + "'/>QRCODE_" + i + '</div>' + str
|
|
break
|
|
case 9:
|
|
str = '<div><img src="public/images/barcode.svg" id=\'obj' + i + "'/>BARCODE_" + i + '</div>' + str
|
|
break
|
|
case 10:
|
|
str = '<div><img src="public/images/counter.svg" id=\'obj' + i + "'/>COUNTER_" + i + '</div>' + str
|
|
break
|
|
}
|
|
i++
|
|
}
|
|
$('.obj_list').html(str)
|
|
}
|
|
function selectObj(i, notSelect = false) {
|
|
//for(let item in $(".obj_list").children()){
|
|
// if(_i == i){
|
|
// item.css("background-color","#6F7A84");
|
|
// }else{
|
|
// item.css("background-color","");
|
|
// }
|
|
// _i++;
|
|
//}
|
|
$('.obj_list div').each(function (index) {
|
|
//if(index == i){
|
|
if ($(this).children('img').attr('id') == 'obj' + i) {
|
|
$(this).css('background-color', '#6F7A84')
|
|
canvas.setActiveObject(canvas.getObjects()[i + 1])
|
|
canvas.renderAll()
|
|
} else {
|
|
$(this).css('background-color', '')
|
|
}
|
|
})
|
|
if (!notSelect) {
|
|
handleObjectSelected()
|
|
}
|
|
}
|
|
function recordState() {
|
|
//pre_objs.push(JSON.stringify(objs));
|
|
//pre_json.push(canvas.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]));
|
|
//next_json = [];
|
|
//next_objs = [];
|
|
//recordObjs.push(JSON.stringify(objs));
|
|
//recordJson.push(canvas.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]));
|
|
++step.val
|
|
for (let i = step.val; i < recordObjs.length; i++) {
|
|
recordObjs.pop()
|
|
recordJson.pop()
|
|
}
|
|
//recordObjs.splice(step.val, 1, JSON.stringify(objs))
|
|
//recordJson.splice(step.val, 1, canvas.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]))
|
|
recordObjs.push(JSON.stringify(objs))
|
|
j = canvas.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
|
|
j.objects[0].hoverCursor = 'default'
|
|
recordJson.push(j)
|
|
console.log(recordJson)
|
|
}
|
|
function getCoordsMinX(acoords) {
|
|
x = acoords[0].x
|
|
for (let item of acoords) {
|
|
if (item.x < x) {
|
|
x = item.x
|
|
}
|
|
}
|
|
return x
|
|
}
|
|
function getCoordsMaxX(acoords) {
|
|
x = acoords[0].x
|
|
for (let item of acoords) {
|
|
if (item.x > x) {
|
|
x = item.x
|
|
}
|
|
}
|
|
return x
|
|
}
|
|
function getCoordsMinY(acoords) {
|
|
y = acoords[0].y
|
|
for (let item of acoords) {
|
|
if (item.y < y) {
|
|
y = item.y
|
|
}
|
|
}
|
|
return y
|
|
}
|
|
function getCoordsMaxY(acoords) {
|
|
y = acoords[0].y
|
|
for (let item of acoords) {
|
|
if (item.y > y) {
|
|
y = item.y
|
|
}
|
|
}
|
|
return y
|
|
}
|
|
|
|
$('#text_y').bind('input propertychange', function () {
|
|
if ($('#text_y').val() == '') {
|
|
$('#text_y').val(0)
|
|
}
|
|
let val = background_image.top
|
|
if ($('#text_y').val() != '') {
|
|
val = background_image.top + parseInt($('#text_y').val())
|
|
}
|
|
canvas.getActiveObject().set('top', val)
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#text_x').bind('input propertychange', function () {
|
|
if ($('#text_x').val() == '') {
|
|
$('#text_x').val(0)
|
|
}
|
|
let val = background_image.left
|
|
if ($('#text_x').val() != '') {
|
|
val = background_image.left + parseInt($('#text_x').val())
|
|
}
|
|
canvas.getActiveObject().set('left', val)
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#text_w').bind('input propertychange', function () {
|
|
let val = '0'
|
|
if ($('#text_w').val() != '') {
|
|
val = $('#text_w').val()
|
|
}
|
|
let type = objs[getIndex(canvas.getActiveObject()) - 1].type
|
|
if (type == 3 || type == 4) {
|
|
canvas.getActiveObject().set('width', parseInt(val))
|
|
} else {
|
|
canvas.getActiveObject().set('scaleX', parseInt(val) / canvas.getActiveObject().get('width'))
|
|
}
|
|
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#text_h').bind('input propertychange', function () {
|
|
let idx = getIndex(canvas.getActiveObject())
|
|
if (objs[idx - 1].type == 7) {
|
|
if ($('#text_h').val() == '') {
|
|
$('#text_h').val(canvas.getActiveObject().get('strokeWidth'))
|
|
}
|
|
canvas.getActiveObject().set('strokeWidth', parseInt($('#text_h').val()))
|
|
canvas.renderAll()
|
|
return
|
|
}
|
|
let val = '0'
|
|
if ($('#text_h').val() != '') {
|
|
val = $('#text_h').val()
|
|
}
|
|
let type = objs[getIndex(canvas.getActiveObject()) - 1].type
|
|
if (type == 3 || type == 4) {
|
|
canvas.getActiveObject().set('height', parseInt(val))
|
|
} else {
|
|
canvas.getActiveObject().set('scaleY', parseInt(val) / canvas.getActiveObject().get('height'))
|
|
}
|
|
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#text_r').bind('input propertychange', function () {
|
|
if ($('#text_r').val() == '') {
|
|
$('#text_r').val('0')
|
|
}
|
|
$('#text_r').val(parseInt($('#text_r').val()) % 360)
|
|
//canvas.getActiveObject().set("rotate", val)
|
|
canvas.getActiveObject().rotate(parseInt($('#text_r').val()))
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#out_pic_field_name').bind('input propertychange', function () {
|
|
let idx = getIndex(canvas.getActiveObject())
|
|
objs[idx - 1].name = $('#out_pic_field_name').val()
|
|
updateList()
|
|
recordState()
|
|
})
|
|
|
|
$('#text_black').click(function () {
|
|
let idx = getIndex(canvas.getActiveObject())
|
|
if ($(this).prop('checked')) {
|
|
objs[idx - 1].black = true
|
|
} else {
|
|
objs[idx - 1].black = false
|
|
}
|
|
recordState()
|
|
})
|
|
// $("#out_pic_black").click(function () {
|
|
// let idx = getIndex(canvas.getActiveObject());
|
|
// if ($(this).prop("checked")) {
|
|
// objs[idx-1].black = true;
|
|
// } else {
|
|
// objs[idx-1].black = false;
|
|
// }
|
|
// recordState();
|
|
// });
|
|
$('#out_text_field_name').bind('input propertychange', function () {
|
|
let idx = getIndex(canvas.getActiveObject())
|
|
objs[idx - 1].name = $('#out_text_field_name').val()
|
|
updateList()
|
|
recordState()
|
|
})
|
|
$('#qrcode_field_name').bind('input propertychange', function () {
|
|
let idx = getIndex(canvas.getActiveObject())
|
|
objs[idx - 1].name = $('#qrcode_field_name').val()
|
|
updateList()
|
|
recordState()
|
|
})
|
|
$('#qrcode_color').bind('input propertychange', function () {
|
|
let item = canvas.getActiveObject()
|
|
let qr = jrQrcode.getQrBase64('https://www.cardsoon.com', { padding: 0, foreground: $(this).val() })
|
|
let idx = getIndex(item)
|
|
objs[idx - 1].color = $(this).val()
|
|
item.setSrc(qr, function (img) {
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
})
|
|
$('#qrcode_val').bind('input propertychange', function () {
|
|
let item = canvas.getActiveObject()
|
|
let idx = getIndex(item)
|
|
objs[idx - 1].val = $(this).val()
|
|
})
|
|
$('#barcode_color').bind('input propertychange', function () {
|
|
let item = canvas.getActiveObject()
|
|
let idx = getIndex(item)
|
|
objs[idx - 1].color = $(this).val()
|
|
JsBarcode('#barcode', objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: objs[idx - 1].fontSize, font: objs[idx - 1].font })
|
|
let barcode = document.getElementById('barcode')
|
|
let bar = barcode.toDataURL('image/png')
|
|
item.setSrc(bar, function (img) {
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
})
|
|
$('#barcode_field_name').bind('input propertychange', function () {
|
|
let idx = getIndex(canvas.getActiveObject())
|
|
objs[idx - 1].name = $('#barcode_field_name').val()
|
|
updateList()
|
|
recordState()
|
|
})
|
|
$('#text_color').bind('input propertychange', function () {
|
|
canvas.getActiveObject().set('fill', $('#text_color').val())
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#text_back_color').bind('input propertychange', function () {
|
|
canvas.getActiveObject().set('textBackgroundColor', $('#text_back_color').val())
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#out_text_back_color').bind('input propertychange', function () {
|
|
canvas.getActiveObject().set('textBackgroundColor', $('#out_text_back_color').val())
|
|
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#text_size').bind('input propertychange', function () {
|
|
canvas.getActiveObject().set('fontSize', $('#text_size').val())
|
|
$('#text_h').val(canvas.getActiveObject().get('height').toFixed(0))
|
|
$('#text_w').val(canvas.getActiveObject().get('width').toFixed(0))
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#out_text_color').bind('input propertychange', function () {
|
|
canvas.getActiveObject().set('fill', $('#out_text_color').val())
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#out_text_size').bind('input propertychange', function () {
|
|
canvas.getActiveObject().set('fontSize', $('#out_text_size').val())
|
|
$('#text_h').val(canvas.getActiveObject().get('height').toFixed(0))
|
|
$('#text_w').val(canvas.getActiveObject().get('width').toFixed(0))
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#out_text_text').bind('input propertychange', function () {
|
|
canvas.getActiveObject().set('text', $('#out_text_text').val())
|
|
canvas.renderAll()
|
|
updateList()
|
|
recordState()
|
|
})
|
|
$('#rect_color').bind('input propertychange', function () {
|
|
canvas.getActiveObject().set('fill', $('#rect_color').val())
|
|
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#rect_stroke').bind('input propertychange', function () {
|
|
canvas.getActiveObject().set('stroke', $('#rect_stroke').val())
|
|
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#rect_stroke_width').bind('input propertychange', function () {
|
|
if ($('#rect_stroke_width').val() == '') {
|
|
$('#rect_stroke_width').val('0')
|
|
} else {
|
|
$('#rect_stroke_width').val(parseInt($('#rect_stroke_width').val()))
|
|
}
|
|
canvas.getActiveObject().set('strokeWidth', parseInt($('#rect_stroke_width').val()))
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#rect_radius').bind('input propertychange', function () {
|
|
if ($('#rect_radius').val() == '') {
|
|
$('#rect_radius').val('0')
|
|
} else {
|
|
$('#rect_radius').val(parseInt($('#rect_radius').val()))
|
|
}
|
|
canvas.getActiveObject().set('rx', parseInt($('#rect_radius').val()))
|
|
canvas.getActiveObject().set('ry', parseInt($('#rect_radius').val()))
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#circle_color').bind('input propertychange', function () {
|
|
canvas.getActiveObject().set('fill', $('#circle_color').val())
|
|
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#circle_stroke').bind('input propertychange', function () {
|
|
canvas.getActiveObject().set('stroke', $('#circle_stroke').val())
|
|
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#circle_stroke_width').bind('input propertychange', function () {
|
|
if ($('#circle_stroke_width').val() == '') {
|
|
$('#circle_stroke_width').val('0')
|
|
} else {
|
|
$(this).val(parseInt($(this).val()))
|
|
}
|
|
canvas.getActiveObject().set('strokeWidth', parseInt($('#circle_stroke_width').val()))
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#counter_start').bind('input propertychange', function () {
|
|
canvas.getActiveObject().set('text', $('#counter_start').val())
|
|
let item = canvas.getActiveObject()
|
|
let idx = getIndex(item)
|
|
objs[idx - 1].start = $(this).val()
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#counter_add').bind('input propertychange', function () {
|
|
let item = canvas.getActiveObject()
|
|
let idx = getIndex(item)
|
|
objs[idx - 1].add = $(this).val()
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#counter_color').bind('input propertychange', function () {
|
|
canvas.getActiveObject().set('fill', $('#counter_color').val())
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#count_size').bind('input propertychange', function () {
|
|
canvas.getActiveObject().set('fontSize', $('#count_size').val())
|
|
$('#text_h').val(canvas.getActiveObject().get('height').toFixed(0))
|
|
$('#text_w').val(canvas.getActiveObject().get('width').toFixed(0))
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#line_color').bind('input propertychange', function () {
|
|
canvas.getActiveObject().set('stroke', $('#line_color').val())
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#line_dist').bind('input propertychange', function () {
|
|
if ($('#line_dist').val() == '') {
|
|
$('#line_dist').val(0)
|
|
}
|
|
canvas.getActiveObject().set('strokeDashArray', [parseInt($('#line_dist').val()), parseInt($('#line_dist').val())])
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#text_text').bind('input propertychange', function () {
|
|
canvas.getActiveObject().set('text', $('#text_text').val())
|
|
canvas.renderAll()
|
|
updateList()
|
|
recordState()
|
|
})
|
|
$('#barcode_val').bind('input propertychange', function () {
|
|
let item = canvas.getActiveObject()
|
|
let idx = getIndex(item)
|
|
objs[idx - 1].val = $(this).val()
|
|
JsBarcode('#barcode', objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: objs[idx - 1].fontSize, font: objs[idx - 1].font })
|
|
|
|
let barcode = document.getElementById('barcode')
|
|
let bar = barcode.toDataURL('image/png')
|
|
item.setSrc(bar, function (img) {
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
})
|
|
$('#barcode_show').click(function () {
|
|
let idx = getIndex(canvas.getActiveObject())
|
|
if ($(this).prop('checked')) {
|
|
objs[idx - 1].show = true
|
|
} else {
|
|
objs[idx - 1].show = false
|
|
}
|
|
recordState()
|
|
})
|
|
$('#barcode_size').bind('input propertychange', function () {
|
|
let item = canvas.getActiveObject()
|
|
let idx = getIndex(item)
|
|
objs[idx - 1].fontSize = $(this).val()
|
|
JsBarcode('#barcode', objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: objs[idx - 1].fontSize, font: objs[idx - 1].font })
|
|
|
|
let barcode = document.getElementById('barcode')
|
|
let bar = barcode.toDataURL('image/png')
|
|
item.setSrc(bar, function (img) {
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
})
|
|
$('#count_font_family').on('change', function () {
|
|
canvas.getActiveObject().set('fontFamily', $(this).find('option:selected').text())
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('#text_font_family').on('change', function () {
|
|
canvas.getActiveObject().set('fontFamily', $(this).find('option:selected').text())
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
|
|
$('#language_select').on('change', function () {
|
|
//语言选择
|
|
langua_ge($(this).find('option:selected').val())
|
|
s_lan = $(this).find('option:selected').val()
|
|
localStorage.setItem('lang', s_lan)
|
|
})
|
|
$('#barcode_font_family').on('change', function () {
|
|
let item = canvas.getActiveObject()
|
|
let idx = getIndex(item)
|
|
objs[idx - 1].font = $(this).find('option:selected').text()
|
|
JsBarcode('#barcode', objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: objs[idx - 1].fontSize, font: objs[idx - 1].font })
|
|
|
|
let barcode = document.getElementById('barcode')
|
|
let bar = barcode.toDataURL('image/png')
|
|
item.setSrc(bar, function (img) {
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
//recordState();
|
|
})
|
|
$('#out_text_font_family').on('change', function () {
|
|
canvas.getActiveObject().set('fontFamily', $(this).find('option:selected').text())
|
|
canvas.renderAll()
|
|
recordState()
|
|
})
|
|
$('.obj_list').on('click', 'div', function () {
|
|
let idx = objs.length - 1 - $(this).index()
|
|
selectObj(idx)
|
|
})
|
|
$('#exceed').click(function () {
|
|
let idx = getIndex(canvas.getActiveObject())
|
|
if ($(this).prop('checked')) {
|
|
objs[idx - 1].exceed = true
|
|
} else {
|
|
objs[idx - 1].exceed = false
|
|
}
|
|
recordState()
|
|
})
|
|
$('#autoWrap').click(function () {
|
|
let idx = getIndex(canvas.getActiveObject())
|
|
if ($(this).prop('checked')) {
|
|
objs[idx - 1].autoWrap = true
|
|
} else {
|
|
objs[idx - 1].autoWrap = false
|
|
}
|
|
recordState()
|
|
})
|
|
$('#fixSize').click(function () {
|
|
let idx = getIndex(canvas.getActiveObject())
|
|
if ($(this).prop('checked')) {
|
|
objs[idx - 1].fixSize = true
|
|
} else {
|
|
objs[idx - 1].fixSize = false
|
|
}
|
|
recordState()
|
|
})
|
|
$('#delete').click(function () {
|
|
let actObjs = canvas.getActiveObjects()
|
|
let allObjs = canvas.getObjects()
|
|
let flag = 0
|
|
for (let item of actObjs) {
|
|
if (item != allObjs[0]) {
|
|
let i = getIndex(item) //0是背景，所以从1开始，但objs不包含背景图片，故要-1
|
|
objs.splice(i - 1, 1)
|
|
canvas.remove(item)
|
|
flag = 1
|
|
}
|
|
}
|
|
updateList()
|
|
canvas.discardActiveObject()
|
|
if (flag == 1) {
|
|
recordState()
|
|
canvas.renderAll()
|
|
}
|
|
// let actObjs = canvas.getActiveObjects();
|
|
// let allObjs = canvas.getObjects();
|
|
// let flag = 0;
|
|
// for( let item of actObjs){
|
|
// if ( item != allObjs[0]){
|
|
// let i = getIndex(item);//0是背景，所以从1开始，但objs不包含背景图片，故要-1
|
|
// objs.splice(i-1,1);
|
|
// canvas.remove(item);
|
|
// flag = 1;
|
|
// updateList();
|
|
// }
|
|
// }
|
|
// selectObj(-1);
|
|
// if(flag == 1){
|
|
// recordState();
|
|
// }
|
|
})
|
|
$('#about').click(function () {
|
|
layer.open({
|
|
type: 1,
|
|
title: language_str('about'), //不显示标题栏 "关于Soon Design"
|
|
area: '450px;',
|
|
id: 'LAY_layuipro', //设定一个id，防止重复弹出
|
|
moveType: 1, //拖拽模式，0或者1
|
|
content:
|
|
'<div style="padding-top:20px;padding-bottom:30px;background-color: #32363A; color: #fff; font-weight: 300;text-align:center;"><div style="width: 120px;margin: 0 auto;"><img style="width: 120px;" src="./public/images/IconA.png"></div><div style="font-size:24px;">Soon Design</div><div style="font-size:14px;">' +
|
|
language_str('vers') +
|
|
' 2.1.2</div><div style="font-size:14px;">' +
|
|
language_str('copyright') +
|
|
'</div></div>'
|
|
})
|
|
})
|
|
$('#help').click(function () {
|
|
ipcRenderer.send('open-help-file')
|
|
})
|
|
function handleObjectSelected() {
|
|
let select_obj = canvas.getActiveObject()
|
|
if (!select_obj) {
|
|
$('#base_control').hide()
|
|
$('#line_control').hide()
|
|
$('#pic_control').hide()
|
|
$('#out_pic_control').hide()
|
|
$('#text_control').hide()
|
|
$('#out_text_control').hide()
|
|
$('#rect_control').hide()
|
|
$('#circle_control').hide()
|
|
$('#counter_control').hide()
|
|
$('#qrcode_Controll').hide()
|
|
$('#barcode_controll').hide()
|
|
$('#component_type').text(language_str('bg')) //comfirm
|
|
return
|
|
}
|
|
let i = getIndex(select_obj)
|
|
if (i != 0) {
|
|
//不是背景
|
|
//console.log(objs);
|
|
--i
|
|
switch (objs[i].type) {
|
|
case 1:
|
|
//console.log("图片");
|
|
$('#component_type').text(language_str('img')) //"图片"
|
|
selectObject(select_obj, i)
|
|
selectPic(select_obj, i)
|
|
break
|
|
case 2:
|
|
//console.log("预留图片");
|
|
|
|
$('#component_type').text(language_str('simg')) //"合成图片"
|
|
selectObject(select_obj, i)
|
|
selectOutPic(select_obj, i)
|
|
break
|
|
case 3:
|
|
$('#component_type').text(language_str('text')) //"文字"
|
|
//console.log("文字");
|
|
selectObject(select_obj, i)
|
|
selectText(select_obj, i)
|
|
break
|
|
case 4:
|
|
//console.log("标签");
|
|
|
|
$('#component_type').text(language_str('stext')) //"合成文字"
|
|
selectObject(select_obj, i)
|
|
selectOutText(select_obj, i)
|
|
break
|
|
case 5:
|
|
//console.log("矩形");
|
|
|
|
$('#component_type').text(language_str('rect')) //"矩形"
|
|
selectObject(select_obj, i)
|
|
selectRect(select_obj, i)
|
|
break
|
|
case 6:
|
|
//console.log("圆形");
|
|
|
|
$('#component_type').text(language_str('circ')) //"圆形"
|
|
selectObject(select_obj, i)
|
|
selectCircle(select_obj, i)
|
|
break
|
|
case 7:
|
|
//console.log("直线");
|
|
|
|
$('#component_type').text(language_str('line')) //"直线"
|
|
selectObject(select_obj, i)
|
|
selectLine(select_obj, i)
|
|
break
|
|
case 8:
|
|
//console.log("二维码");
|
|
|
|
$('#component_type').text(language_str('qrc')) //"二维码"
|
|
selectObject(select_obj, i)
|
|
selectQrCode(select_obj, i)
|
|
break
|
|
case 9:
|
|
//console.log("条形码");
|
|
|
|
$('#component_type').text(language_str('barc')) //"条形码"
|
|
selectObject(select_obj, i)
|
|
selectBarCode(select_obj, i)
|
|
break
|
|
case 10:
|
|
//console.log("计数器");
|
|
|
|
$('#component_type').text(language_str('counter')) //"计数器"
|
|
selectObject(select_obj, i)
|
|
selectCounter(select_obj, i)
|
|
break
|
|
}
|
|
} else {
|
|
//背景，收起对象属性
|
|
$('#base_control').hide()
|
|
$('#line_control').hide()
|
|
$('#pic_control').hide()
|
|
$('#out_pic_control').hide()
|
|
$('#text_control').hide()
|
|
$('#out_text_control').hide()
|
|
$('#rect_control').hide()
|
|
$('#circle_control').hide()
|
|
$('#counter_control').hide()
|
|
$('#qrcode_Controll').hide()
|
|
$('#barcode_controll').hide()
|
|
$('#component_type').text(language_str('bg'))
|
|
}
|
|
}
|
|
|
|
canvas1.on('mouse:move', (e) => {
|
|
let width = canvas.getWidth()
|
|
let height = canvas.getHeight()
|
|
$('#posText').text(
|
|
'X: ' + (e.pointer.x - (width / 2 - (width / 2 - background_image.left) * zoom)).toFixed(0) + ' Y: ' + (e.pointer.y - (height / 2 - (height / 2 - background_image.top) * zoom)).toFixed(0)
|
|
)
|
|
})
|
|
canvas1.on('object:moving', function (e) {
|
|
updateControls()
|
|
})
|
|
canvas1.on('object:scaling', function (event) {
|
|
//if(objs[getIndex(event.target) - 1].type == 5 || objs[getIndex(event.target) - 1].type == 6){
|
|
// //canvas.getActiveObject().set("width", canvas.getActiveObject().get("width") * canvas.getActiveObject().get("scaleX"));
|
|
// //canvas.getActiveObject().set("height", canvas.getActiveObject().get("height") * canvas.getActiveObject().get("scaleY"));
|
|
// //canvas.getActiveObject().set("scaleX", 1);
|
|
// //canvas.getActiveObject().set("scaleY", 1);
|
|
// //console.log(canvas.getActiveObject().get("scaleX"));
|
|
// //canvas1.discardActiveObject();
|
|
// //canvas1.setActiveObject(event.target);
|
|
// //canvas1.renderAll();
|
|
// //updateControls();
|
|
//}
|
|
})
|
|
canvas1.on('object:rotating', function (e) {
|
|
updateControls()
|
|
})
|
|
canvas1.on('object:rotated', function (e) {
|
|
console.log('object:rotated')
|
|
recordState()
|
|
})
|
|
canvas1.on('object:added', function (e) {
|
|
//console.log("object:added");
|
|
//recordState();
|
|
////console.log(objs);
|
|
})
|
|
canvas1.on('mouse:down', (e) => {
|
|
//单选
|
|
let select_obj = canvas.getActiveObject()
|
|
console.log(select_obj)
|
|
let i = getIndex(select_obj)
|
|
if (i != 0) {
|
|
//不是背景
|
|
//console.log(objs);
|
|
--i
|
|
switch (objs[i].type) {
|
|
case 1:
|
|
//console.log("图片");
|
|
$('#component_type').text(language_str('img')) //"图片"
|
|
selectObject(select_obj, i)
|
|
selectPic(select_obj, i)
|
|
break
|
|
case 2:
|
|
//console.log("预留图片");
|
|
|
|
$('#component_type').text(language_str('simg')) //"合成图片"
|
|
selectObject(select_obj, i)
|
|
selectOutPic(select_obj, i)
|
|
break
|
|
case 3:
|
|
$('#component_type').text(language_str('text')) //"文字"
|
|
//console.log("文字");
|
|
selectObject(select_obj, i)
|
|
selectText(select_obj, i)
|
|
break
|
|
case 4:
|
|
//console.log("标签");
|
|
|
|
$('#component_type').text(language_str('stext')) //"合成文字"
|
|
selectObject(select_obj, i)
|
|
selectOutText(select_obj, i)
|
|
break
|
|
case 5:
|
|
//console.log("矩形");
|
|
|
|
$('#component_type').text(language_str('rect')) //"矩形"
|
|
selectObject(select_obj, i)
|
|
selectRect(select_obj, i)
|
|
break
|
|
case 6:
|
|
//console.log("圆形");
|
|
|
|
$('#component_type').text(language_str('circ')) //"圆形"
|
|
selectObject(select_obj, i)
|
|
selectCircle(select_obj, i)
|
|
break
|
|
case 7:
|
|
//console.log("直线");
|
|
|
|
$('#component_type').text(language_str('line')) //"直线"
|
|
selectObject(select_obj, i)
|
|
selectLine(select_obj, i)
|
|
break
|
|
case 8:
|
|
//console.log("二维码");
|
|
|
|
$('#component_type').text(language_str('qrc')) //"二维码"
|
|
selectObject(select_obj, i)
|
|
selectQrCode(select_obj, i)
|
|
break
|
|
case 9:
|
|
//console.log("条形码");
|
|
|
|
$('#component_type').text(language_str('barc')) //"条形码"
|
|
selectObject(select_obj, i)
|
|
selectBarCode(select_obj, i)
|
|
break
|
|
case 10:
|
|
//console.log("计数器");
|
|
|
|
$('#component_type').text(language_str('counter')) //"计数器"
|
|
selectObject(select_obj, i)
|
|
selectCounter(select_obj, i)
|
|
break
|
|
}
|
|
selectObj(i, true) //如果是点击画布中，则相应列表
|
|
} else {
|
|
//背景，收起对象属性
|
|
$('#base_control').hide()
|
|
$('#line_control').hide()
|
|
$('#pic_control').hide()
|
|
$('#out_pic_control').hide()
|
|
$('#text_control').hide()
|
|
$('#out_text_control').hide()
|
|
$('#rect_control').hide()
|
|
$('#circle_control').hide()
|
|
$('#counter_control').hide()
|
|
$('#qrcode_Controll').hide()
|
|
$('#barcode_controll').hide()
|
|
selectObj(-1)
|
|
$('#component_type').text(language_str('bg'))
|
|
}
|
|
})
|
|
canvas1.on('text:editing:entered', function () {
|
|
_textEdit = true
|
|
})
|
|
canvas1.on('text:editing:exited', function () {
|
|
_textEdit = false
|
|
})
|
|
canvas1.on('object:modified', function (event) {
|
|
if (canvas1.getActiveObjects().length > 1) {
|
|
return
|
|
}
|
|
if (objs[getIndex(event.target) - 1].type == 3) {
|
|
event.target.fontSize *= event.target.scaleX
|
|
event.target.fontSize = event.target.fontSize.toFixed(0)
|
|
event.target.scaleX = 1
|
|
event.target.scaleY = 1
|
|
event.target._clearCache()
|
|
$('#text_size').val(event.target.fontSize)
|
|
canvas1.renderAll()
|
|
updateControls()
|
|
} else if (objs[getIndex(event.target) - 1].type == 4) {
|
|
event.target.fontSize *= event.target.scaleX
|
|
event.target.fontSize = event.target.fontSize.toFixed(0)
|
|
event.target.scaleX = 1
|
|
event.target.scaleY = 1
|
|
event.target._clearCache()
|
|
$('#out_text_size').val(event.target.fontSize)
|
|
canvas1.renderAll()
|
|
} else if (objs[getIndex(event.target) - 1].type == 10) {
|
|
event.target.fontSize *= event.target.scaleX
|
|
event.target.fontSize = event.target.fontSize.toFixed(0)
|
|
event.target.scaleX = 1
|
|
event.target.scaleY = 1
|
|
event.target._clearCache()
|
|
$('#count_size').val(event.target.fontSize)
|
|
canvas1.renderAll()
|
|
} else if (objs[getIndex(event.target) - 1].type == 5) {
|
|
canvas1.getActiveObject().set('width', canvas1.getActiveObject().get('width') * canvas1.getActiveObject().get('scaleX'))
|
|
canvas1.getActiveObject().set('height', canvas1.getActiveObject().get('height') * canvas1.getActiveObject().get('scaleY'))
|
|
canvas1.getActiveObject().set('scaleX', 1)
|
|
canvas1.getActiveObject().set('scaleY', 1)
|
|
updateControls()
|
|
}
|
|
recordState()
|
|
})
|
|
canvas1.on('mouse:up', (e) => {
|
|
//HERE
|
|
switch (addState) {
|
|
case 1:
|
|
addPic(e.pointer)
|
|
addState = 0
|
|
background_image.hoverCursor = 'default'
|
|
canvas1.renderAll()
|
|
$('#addPic').css('background-color', '')
|
|
break
|
|
case 2:
|
|
addOutPic(e.pointer)
|
|
addState = 0
|
|
background_image.hoverCursor = 'default'
|
|
canvas1.renderAll()
|
|
$('#addOutPic').css('background-color', '')
|
|
break
|
|
case 3:
|
|
addText(e.pointer)
|
|
addState = 0
|
|
background_image.hoverCursor = 'default'
|
|
canvas1.renderAll()
|
|
$('#addText').css('background-color', '')
|
|
break
|
|
case 4:
|
|
addOutText(e.pointer)
|
|
addState = 0
|
|
background_image.hoverCursor = 'default'
|
|
canvas1.renderAll()
|
|
$('#addOutText').css('background-color', '')
|
|
break
|
|
case 5:
|
|
addRect(e.pointer)
|
|
addState = 0
|
|
background_image.hoverCursor = 'default'
|
|
canvas1.renderAll()
|
|
$('#addRect').css('background-color', '')
|
|
break
|
|
case 6:
|
|
addCircle(e.pointer)
|
|
addState = 0
|
|
background_image.hoverCursor = 'default'
|
|
canvas1.renderAll()
|
|
$('#addCircle').css('background-color', '')
|
|
break
|
|
case 7:
|
|
addLine(e.pointer)
|
|
addState = 0
|
|
background_image.hoverCursor = 'default'
|
|
canvas1.renderAll()
|
|
$('#addLine').css('background-color', '')
|
|
break
|
|
case 8:
|
|
addQrCode(e.pointer)
|
|
addState = 0
|
|
background_image.hoverCursor = 'default'
|
|
canvas1.renderAll()
|
|
$('#addQrCode').css('background-color', '')
|
|
break
|
|
case 9:
|
|
addBarCode(e.pointer)
|
|
addState = 0
|
|
background_image.hoverCursor = 'default'
|
|
canvas1.renderAll()
|
|
$('#addBarCode').css('background-color', '')
|
|
break
|
|
case 10:
|
|
addCounter(e.pointer)
|
|
addState = 0
|
|
background_image.hoverCursor = 'default'
|
|
$('#addCounter').css('background-color', '')
|
|
break
|
|
}
|
|
})
|
|
canvas1.on('text:changed', (e) => {
|
|
$('#text_text').val(e.target.get('text'))
|
|
})
|
|
canvas1.on('after:render', function () {
|
|
if (is_bgi_add) {
|
|
var image = document.getElementById('source_front')
|
|
ctx1.drawImage(image, (canvas.width - $('#source_front').width()) / 2, (canvas.height - $('#source_front').height()) / 2, $('#source_front').width(), $('#source_front').height())
|
|
|
|
/*
|
|
实际905 * 534
|
|
1052 *
|
|
*/
|
|
}
|
|
})
|
|
canvas2.on('text:editing:entered', function () {
|
|
_textEdit = true
|
|
})
|
|
canvas2.on('text:editing:exited', function () {
|
|
_textEdit = false
|
|
})
|
|
canvas2.on('after:render', function () {
|
|
if (is_bgi_add) {
|
|
var image = document.getElementById('source_back')
|
|
ctx2.drawImage(image, (canvas.width - $('#source_back').width()) / 2, (canvas1.height - $('#source_back').height()) / 2, $('#source_back').width(), $('#source_back').height())
|
|
}
|
|
})
|
|
canvas2.on('mouse:move', (e) => {
|
|
$('#posText').text('X: ' + (e.pointer.x - background_image.left).toFixed(0) + ' Y: ' + (e.pointer.y - background_image.top).toFixed(0))
|
|
})
|
|
canvas2.on('object:moving', function (e) {
|
|
updateControls()
|
|
})
|
|
canvas2.on('object:scaling', function (e) {
|
|
updateControls()
|
|
})
|
|
canvas2.on('object:rotating', function (e) {
|
|
updateControls()
|
|
})
|
|
canvas2.on('object:rotated', function (e) {
|
|
console.log('object:rotated')
|
|
recordState()
|
|
})
|
|
canvas2.on('object:added', function (e) {
|
|
//console.log("object:added");
|
|
//recordState();
|
|
////console.log(objs);
|
|
})
|
|
canvas2.on('mouse:down', (e) => {
|
|
//单选
|
|
let select_obj = canvas.getActiveObject()
|
|
let i = getIndex(select_obj)
|
|
if (i != 0) {
|
|
//不是背景
|
|
//console.log(objs);
|
|
--i
|
|
switch (objs[i].type) {
|
|
case 1:
|
|
//console.log("图片");
|
|
$('#component_type').text(language_str('img')) //"图片"
|
|
selectObject(select_obj, i)
|
|
selectPic(select_obj, i)
|
|
break
|
|
case 2:
|
|
//console.log("预留图片");
|
|
|
|
$('#component_type').text(language_str('simg')) //"合成图片"
|
|
selectObject(select_obj, i)
|
|
selectOutPic(select_obj, i)
|
|
break
|
|
case 3:
|
|
$('#component_type').text(language_str('text')) //"文字"
|
|
//console.log("文字");
|
|
selectObject(select_obj, i)
|
|
selectText(select_obj, i)
|
|
break
|
|
case 4:
|
|
//console.log("标签");
|
|
|
|
$('#component_type').text(language_str('stext')) //"合成文字"
|
|
selectObject(select_obj, i)
|
|
selectOutText(select_obj, i)
|
|
break
|
|
case 5:
|
|
//console.log("矩形");
|
|
|
|
$('#component_type').text(language_str('rect')) //"矩形"
|
|
selectObject(select_obj, i)
|
|
selectRect(select_obj, i)
|
|
break
|
|
case 6:
|
|
//console.log("圆形");
|
|
|
|
$('#component_type').text(language_str('circ')) //"圆形"
|
|
selectObject(select_obj, i)
|
|
selectCircle(select_obj, i)
|
|
break
|
|
case 7:
|
|
//console.log("直线");
|
|
|
|
$('#component_type').text(language_str('line')) //"直线"
|
|
selectObject(select_obj, i)
|
|
selectLine(select_obj, i)
|
|
break
|
|
case 8:
|
|
//console.log("二维码");
|
|
|
|
$('#component_type').text(language_str('qrc')) //"二维码"
|
|
selectObject(select_obj, i)
|
|
selectQrCode(select_obj, i)
|
|
break
|
|
case 9:
|
|
//console.log("条形码");
|
|
|
|
$('#component_type').text(language_str('barc')) //"条形码"
|
|
selectObject(select_obj, i)
|
|
selectBarCode(select_obj, i)
|
|
break
|
|
case 10:
|
|
//console.log("计数器");
|
|
|
|
$('#component_type').text(language_str('counter')) //"计数器"
|
|
selectObject(select_obj, i)
|
|
selectCounter(select_obj, i)
|
|
break
|
|
}
|
|
selectObj(i, true) //如果是点击画布中，则相应列表
|
|
} else {
|
|
//背景，收起对象属性
|
|
$('#base_control').hide()
|
|
$('#line_control').hide()
|
|
$('#pic_control').hide()
|
|
$('#out_pic_control').hide()
|
|
$('#text_control').hide()
|
|
$('#out_text_control').hide()
|
|
$('#rect_control').hide()
|
|
$('#circle_control').hide()
|
|
$('#qrcode_Controll').hide()
|
|
$('#barcode_controll').hide()
|
|
$('#counter_control').hide()
|
|
selectObj(-1)
|
|
$('#component_type').text(language_str('bg'))
|
|
}
|
|
})
|
|
canvas2.on('object:modified', function (event) {
|
|
if (canvas.getActiveObjects().length > 1) {
|
|
return
|
|
}
|
|
if (objs[getIndex(event.target) - 1].type == 3) {
|
|
event.target.fontSize *= event.target.scaleX
|
|
event.target.fontSize = event.target.fontSize.toFixed(0)
|
|
event.target.scaleX = 1
|
|
event.target.scaleY = 1
|
|
event.target._clearCache()
|
|
$('#text_size').val(event.target.fontSize)
|
|
canvas2.renderAll()
|
|
} else if (objs[getIndex(event.target) - 1].type == 4) {
|
|
event.target.fontSize *= event.target.scaleX
|
|
event.target.fontSize = event.target.fontSize.toFixed(0)
|
|
event.target.scaleX = 1
|
|
event.target.scaleY = 1
|
|
event.target._clearCache()
|
|
$('#out_text_size').val(event.target.fontSize)
|
|
canvas2.renderAll()
|
|
} else if (objs[getIndex(event.target) - 1].type == 10) {
|
|
event.target.fontSize *= event.target.scaleX
|
|
event.target.fontSize = event.target.fontSize.toFixed(0)
|
|
event.target.scaleX = 1
|
|
event.target.scaleY = 1
|
|
event.target._clearCache()
|
|
$('#count_size').val(event.target.fontSize)
|
|
canvas2.renderAll()
|
|
} else if (objs[getIndex(event.target) - 1].type == 5) {
|
|
canvas2.getActiveObject().set('width', canvas2.getActiveObject().get('width') * canvas2.getActiveObject().get('scaleX'))
|
|
canvas2.getActiveObject().set('height', canvas2.getActiveObject().get('height') * canvas2.getActiveObject().get('scaleY'))
|
|
canvas2.getActiveObject().set('scaleX', 1)
|
|
canvas2.getActiveObject().set('scaleY', 1)
|
|
updateControls()
|
|
}
|
|
console.log('object:modified')
|
|
recordState()
|
|
})
|
|
canvas2.on('mouse:up', (e) => {
|
|
//HERE
|
|
switch (addState) {
|
|
case 1:
|
|
addPic(e.pointer)
|
|
addState = 0
|
|
background_image.hoverCursor = 'default'
|
|
canvas2.renderAll()
|
|
$('#addPic').css('background-color', '')
|
|
break
|
|
case 2:
|
|
addOutPic(e.pointer)
|
|
addState = 0
|
|
background_image.hoverCursor = 'default'
|
|
canvas2.renderAll()
|
|
$('#addOutPic').css('background-color', '')
|
|
break
|
|
case 3:
|
|
addText(e.pointer)
|
|
addState = 0
|
|
background_image.hoverCursor = 'default'
|
|
canvas2.renderAll()
|
|
$('#addText').css('background-color', '')
|
|
break
|
|
case 4:
|
|
addOutText(e.pointer)
|
|
addState = 0
|
|
background_image.hoverCursor = 'default'
|
|
canvas2.renderAll()
|
|
$('#addOutText').css('background-color', '')
|
|
break
|
|
case 5:
|
|
addRect(e.pointer)
|
|
addState = 0
|
|
background_image.hoverCursor = 'default'
|
|
canvas2.renderAll()
|
|
$('#addRect').css('background-color', '')
|
|
break
|
|
case 6:
|
|
addCircle(e.pointer)
|
|
addState = 0
|
|
background_image.hoverCursor = 'default'
|
|
canvas2.renderAll()
|
|
$('#addCircle').css('background-color', '')
|
|
break
|
|
case 7:
|
|
addLine(e.pointer)
|
|
addState = 0
|
|
background_image.hoverCursor = 'default'
|
|
canvas2.renderAll()
|
|
$('#addLine').css('background-color', '')
|
|
break
|
|
case 8:
|
|
addQrCode(e.pointer)
|
|
addState = 0
|
|
background_image.hoverCursor = 'default'
|
|
canvas2.renderAll()
|
|
$('#addQrCode').css('background-color', '')
|
|
break
|
|
case 9:
|
|
addBarCode(e.pointer)
|
|
addState = 0
|
|
background_image.hoverCursor = 'default'
|
|
canvas2.renderAll()
|
|
$('#addBarCode').css('background-color', '')
|
|
break
|
|
case 10:
|
|
addCounter(e.pointer)
|
|
addState = 0
|
|
background_image.hoverCursor = 'default'
|
|
canvas2.renderAll()
|
|
$('#addCounter').css('background-color', '')
|
|
break
|
|
}
|
|
})
|
|
|
|
var out_pic_op = slider.render({
|
|
elem: '#out_pic_op',
|
|
change: function (value) {
|
|
console.log(value)
|
|
console.log(canvas.getActiveObject())
|
|
canvas.getActiveObject().set('opacity', (100 - value) / 100)
|
|
canvas.renderAll()
|
|
}
|
|
})
|
|
var pic_op = slider.render({
|
|
elem: '#pic_op',
|
|
change: function (value) {
|
|
console.log(value)
|
|
console.log(canvas.getActiveObject())
|
|
canvas.getActiveObject().set('opacity', (100 - value) / 100)
|
|
canvas.renderAll()
|
|
}
|
|
})
|
|
var rect_op = slider.render({
|
|
elem: '#rect_op',
|
|
change: function (value) {
|
|
console.log(value)
|
|
console.log(canvas.getActiveObject())
|
|
canvas.getActiveObject().set('opacity', (100 - value) / 100)
|
|
canvas.renderAll()
|
|
}
|
|
})
|
|
var circle_op = slider.render({
|
|
elem: '#circle_op',
|
|
change: function (value) {
|
|
console.log(value)
|
|
console.log(canvas.getActiveObject())
|
|
canvas.getActiveObject().set('opacity', (100 - value) / 100)
|
|
canvas.renderAll()
|
|
}
|
|
})
|
|
})
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |