xit-app
/
fims-java-all
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

이미지편집기 수정(왼쪽 회전,오른쪽 회전 버튼 추가)

Browse Source
main
이범준 8 months ago
parent 8bb3ce704b
commit 2198376026
5 changed files with 85 additions and 235 deletions
Show Stats Download Patch File Download Diff File

13
src/main/webapp/resources/lib/fims/biz/paintweb/guiScript.js
Unescape Escape View File

@ -1419,7 +1419,18 @@ pwlib.gui = function (app) {
button.classList.add('btn'); button.classList.add('btn');
button.classList.add('btn-outline-dark'); button.classList.add('btn-outline-dark');
button.classList.add('p-1'); button.classList.add('p-1');
button.appendChild(doc.createTextNode(button.title)); button.classList.add('w-px-100');
if(button.title.indexOf(" [") != -1){
var i = button.title.indexOf(" [");
var str1 = button.title.substr(0,i);
var str2 = button.title.substr(i+1);
button.appendChild(doc.createTextNode(str1));
button.appendChild(doc.createElement('br'));
button.appendChild(doc.createTextNode(str2));
} else {
button.appendChild(doc.createTextNode(button.title));
}
if (elem.firstChild) { if (elem.firstChild) {
elem.removeChild(elem.firstChild); elem.removeChild(elem.firstChild);

5
src/main/webapp/resources/lib/fims/biz/paintweb/korean.js
Unescape Escape View File

@ -106,9 +106,10 @@ let lang_ko = {
"clipboardPaste": "붙여넣기", "clipboardPaste": "붙여넣기",
"historyRedo": "다시 실행", "historyRedo": "다시 실행",
"historyUndo": "실행취소", "historyUndo": "실행취소",
"imageClear": "Clear image", "imageClear": "이미지 지우기",
"imageSave": "이미지 저장", "imageSave": "이미지 저장",
"imageRotate": "이미지 회전", "imageRotateLeft": "왼쪽 회전",
"imageRotateRight": "오른쪽 회전",
"imageBright": "밝게", "imageBright": "밝게",
"imageDark": "어둡게", "imageDark": "어둡게",

212
src/main/webapp/resources/lib/fims/biz/paintweb/layout.js
Unescape Escape View File

@ -1,11 +1,12 @@
let xhtml = `<div xmlns="http://www.w3.org/1999/xhtml"> let xhtml = `<div xmlns="http://www.w3.org/1999/xhtml">
<!-- $Date: 2009-11-08 13:19:52 +0200 $ -->
<h1 class="paintweb_appTitle">PaintWeb</h1> <h1 class="paintweb_appTitle">PaintWeb</h1>
<!-- All elements with data-pwTabPanel become interactive tabbed panels which <!-- All elements with data-pwTabPanel become interactive tabbed panels which
will also have a class name like .paintweb_tabPanel_id and a generic class will also have a class name like .paintweb_tabPanel_id and a generic class
name .paintweb_tabPanel. In this case the class names will be name .paintweb_tabPanel. In this case the class names will be
.paintweb_tabPanel_main and .paintweb_tabPanel. --> .paintweb_tabPanel_main and .paintweb_tabPanel. -->
<div data-pwTabPanel="main" data-pwTabDefault="main"> <div data-pwTabPanel="main" data-pwTabDefault="main">
<!-- All elements with data-pwTab will have a class name like <!-- All elements with data-pwTab will have a class name like
@ -21,63 +22,29 @@ let xhtml = `<div xmlns="http://www.w3.org/1999/xhtml">
.paintweb_cmd_commandID and a generic class name .paintweb_command. In .paintweb_cmd_commandID and a generic class name .paintweb_command. In
this case the class names will be .paintweb_cmd_historyUndo and this case the class names will be .paintweb_cmd_historyUndo and
.paintweb_command. --> .paintweb_command. -->
<!--FIXME: 페인트웹 기능 항목 추가/제거-->
<!--<li data-pwCommand="historyRedo">Redo</li>-->
<li class="paintweb_buttonStyle" data-pwCommand="historyUndo">Undo</li>
<li class="paintweb_buttonStyle" data-pwCommand="historyUndo">실행취소</li>
<li data-pwTool="selection" hidden>영역 선택</li> <li data-pwTool="selection" hidden>영역 선택</li>
<!--<li data-pwTool="hand">Hand</li>-->
<!-- <li data-pwTool="rectangle">Rectangle</li> -->
<li class="paintweb_toolSeparator">&#160;</li> <li class="paintweb_toolSeparator">&#160;</li>
<!--<li data-pwCommand="selectionCut">Cut selection</li>-->
<span style="align-self:center"> <span style="align-self:center">
<li class="paintweb_buttonStyle py-1 h-px-30" data-pwCommand="selectionCrop">자르기</li><br/> <li class="paintweb_buttonStyle py-1 h-px-30" data-pwCommand="selectionCrop">자르기</li><br/>
<li class="paintweb_buttonStyle py-1 h-px-30" data-pwCommand="selectionFill">가림막</li><br/> <li class="paintweb_buttonStyle py-1 h-px-30" data-pwCommand="selectionFill">가림막</li><br/>
<li class="paintweb_buttonStyle py-1 h-px-30" data-pwCommand="selectionForNumberPlate">번호판</li> <li class="paintweb_buttonStyle py-1 h-px-30" data-pwCommand="selectionForNumberPlate">번호판</li>
</span> </span>
<!-- <li data-pwCommand="selectionCopy">선택영역 복사</li> -->
<!--<li data-pwCommand="clipboardPaste">Clipboard paste</li>-->
<!--<li data-pwTool="insertimg">Insert image</li>-->
<!--
<li class="paintweb_strokeFillStyles">
<p class="paintweb_opt_fillStyle">Fill
<span data-pwColorInput="fillStyle">&#160;</span>
</p>
<p class="paintweb_opt_strokeStyle">Stroke
<span data-pwColorInput="strokeStyle">&#160;</span>
</p>
</li>
-->
<li class="paintweb_buttonStyle" data-pwCommand="imageRotate">Rotate image</li>
<span> <span>
<li class="paintweb_buttonStyle" data-pwCommand="imageBright">brighten image</li><br/> <li class="paintweb_buttonStyle" data-pwCommand="imageRotateLeft">왼쪽 회전</li><br/>
<li class="paintweb_buttonStyle" data-pwCommand="imageDark">darken image</li> <li class="paintweb_buttonStyle" data-pwCommand="imageRotateRight">오른쪽 회전</li>
</span>
<span>
<li class="paintweb_buttonStyle" data-pwCommand="imageBright">밝게</li><br/>
<li class="paintweb_buttonStyle" data-pwCommand="imageDark">어둡게</li>
</span> </span>
<!-- All elements with data-pwTool will have a class name like
.paintweb_tool_toolID and a generic class name .paintweb_tool. In this
case the class names will be .paintweb_tool_insertimg and
.paintweb_tool. -->
<!--<li data-pwTool="text">Text</li>-->
<li class="paintweb_toolSeparator">&#160;</li> <li class="paintweb_toolSeparator">&#160;</li>
<!--<li data-pwTool="cpicker">Color picker</li>
<li data-pwTool="cbucket">Color bucket</li>-->
<!--<li data-pwTool="ellipse">Ellipse</li>
<li data-pwTool="polygon">Polygon</li>
<li data-pwTool="line">Line</li>
<li data-pwTool="bcurve">Bézier curve</li>-->
<!--<li data-pwTool="pencil">Pencil</li>-->
<!--<li data-pwTool="eraser">Eraser</li>-->
<!-- <li data-pwCommand="imageClear">Clear image</li> -->
<li> <li>
<label class="w-px-60 pe-2 text-sm-end">차량번호</label><input type='text' id='vhrno' name='vhrno' class='form-control-sm my-1' /><br /> <label class="w-px-60 pe-2 text-sm-end">차량번호</label><input type='text' id='vhrno' name='vhrno' class='form-control-sm my-1' /><br />
<label class="w-px-60 pe-2 text-sm-end">차량명</label><input type='text' id='vhclNm' name='vhclNm' class='form-control-sm my-1' disabled /><br /> <label class="w-px-60 pe-2 text-sm-end">차량명</label><input type='text' id='vhclNm' name='vhclNm' class='form-control-sm my-1' disabled /><br />
@ -86,155 +53,13 @@ let xhtml = `<div xmlns="http://www.w3.org/1999/xhtml">
<li class="paintweb_toolSeparator">&#160;</li> <li class="paintweb_toolSeparator">&#160;</li>
<li class="paintweb_buttonStyle" data-pwCommand="imageSave">Save image</li> <li class="paintweb_buttonStyle" data-pwCommand="imageSave">이미지 저장</li>
</ul> </ul>
</div> </div>
<!-- Note that all tool/command elements will have an anchor elements as the
only child. The locale string will be added as child of the anchor. Having
the anchors allows users to tab through the tools and commands - keyboard
accessibility. -->
<!-- .paintweb_main_line -->
<!-- FIXME : line 툴 사용시
<div data-pwTab="line" data-pwTabHide="true">
&lt;!&ndash; Elements with data-pwConfig will have class names like
paintweb_cfg_configVariable. In this case the class name will be
.paintweb_cfg_line_lineWidth. &ndash;&gt;
<p class="paintweb_opt_lineWidth"><label>Line width <input
data-pwConfig="line.lineWidth" type="number" min="1" value="1"
/></label></p>
&lt;!&ndash; .paintweb_cfg_line_miterLimit (dot becomes underscore) &ndash;&gt;
<p class="paintweb_opt_miterLimit"><label>Miter limit <input
data-pwConfig="line.miterLimit" type="number" min="1" value="10"
/></label></p>
&lt;!&ndash; .paintweb_cfg_line_lineCap &ndash;&gt;
<div data-pwConfig="line.lineCap">
<p>Line cap</p>
&lt;!&ndash; Elements with data-pwConfigValue will have the class name based on
the configuration property name and value. In this case the class name
will be .paintweb_lineCap_butt &ndash;&gt;
<div data-pwConfigValue="butt">Butt</div>
&lt;!&ndash; .paintweb_lineCap_square &ndash;&gt;
<div data-pwConfigValue="square">Square</div>
&lt;!&ndash; .paintweb_lineCap_round &ndash;&gt;
<div data-pwConfigValue="round">Round</div>
</div>
&lt;!&ndash; .paintweb_cfg_line_lineJoin &ndash;&gt;
<div data-pwConfig="line.lineJoin">
<p>Line join</p>
&lt;!&ndash; .paintweb_lineJoin_miter &ndash;&gt;
<div data-pwConfigValue="miter">Miter</div>
&lt;!&ndash; .paintweb_lineJoin_round &ndash;&gt;
<div data-pwConfigValue="round">Round</div>
&lt;!&ndash; .paintweb_lineJoin_bevel &ndash;&gt;
<div data-pwConfigValue="bevel">Bevel</div>
</div>
&lt;!&ndash; .paintweb_cfg_shapeType &ndash;&gt;
<div data-pwConfig="shapeType">
<p>Shape type</p>
&lt;!&ndash; .paintweb_shapeType_both &ndash;&gt;
<div data-pwConfigValue="both">Both</div>
&lt;!&ndash; .paintweb_shapeType_fill &ndash;&gt;
<div data-pwConfigValue="fill">Fill</div>
&lt;!&ndash; .paintweb_shapeType_stroke &ndash;&gt;
<div data-pwConfigValue="stroke">Stroke</div>
</div>
&lt;!&ndash; erm *cough* elements with data-pwConfigValue will be considered icons
(class name .paintweb_icon is added). They will also have an anchor
element appended. &ndash;&gt;
</div>
-->
<!-- .paintweb_main_selection -->
<!--<div data-pwTab="selection" data-pwTabHide="true">
<p data-pwId="selTab_selectionCut">Cut selection</p>
<p data-pwId="selTab_selectionCopy">Copy selection</p>
<p data-pwId="selTab_clipboardPaste">Clipboard paste</p>
<p data-pwCommand="selectionDelete">Delete selection</p>
<p class="paintweb_opt_selectionTransparent">
<label><input data-pwConfig="selection.transparent" type="checkbox"
value="1" checked="checked" /> Transparent background</label>
</p>
<p class="paintweb_opt_selectionTransform">
<label><input data-pwConfig="selection.transform" type="checkbox"
value="1" /> Transformation mode</label>
</p>
</div>-->
<!-- .paintweb_main_text -->
<!-- FIXME : text 툴 사용시
<div data-pwTab="text" data-pwTabHide="true" class="paintweb_tab02">
<p class="paintweb_opt_fontFamily">
<label for="fontFamily">Font family:</label>
<select id="fontFamily" data-pwConfig="text.fontFamily"></select>
</p>
<p class="paintweb_opt_fontSize">
<label for="fontSize">Font size:</label>
<select id="fontSize" data-pwConfig="text.fontSize" style="width:58px"></select>
</p>
<div data-pwConfigButton="text.bold" style="padding-top: 4px;">Bold</div>
<div data-pwConfigButton="text.italic">Italic</div>
<div data-pwConfig="text.textAlign">
<p>Text alignment</p>
<div data-pwConfigButton="text.left">Left</div>
<div data-pwConfigButton="text.center">Center</div>
<div data-pwConfigButton="text.right">Right</div>
</div>
</div>
-->
<!-- .paintweb_main_shadow -->
<!-- FIXME : shadow 툴 사용시
<div data-pwTab="shadow">
<p class="paintweb_opt_shadowEnable"><label><input
data-pwConfig="shadow.enable" type="checkbox" value="1" /> Draw
shadows</label></p>
<p class="paintweb_opt_shadowColor">Color <span
data-pwColorInput="shadow.shadowColor">&#160;</span>
</p>
<p class="paintweb_opt_shadowOffsetX">
<label>Offset X
<input data-pwConfig="shadow.shadowOffsetX" type="number" value="5" />
</label>
</p>
<p class="paintweb_opt_shadowOffsetY">
<label>Offset Y
<input data-pwConfig="shadow.shadowOffsetY" type="number" value="5" />
</label>
</p>
<p class="paintweb_opt_shadowBlur">
<label>Blur
<input data-pwConfig="shadow.shadowBlur" type="number" value="5"
min="0" />
</label>
</p>
</div>
-->
<!-- <p data-pwCommand="about">About</p>-->
</div> <!-- .paintweb_tabPanel_main --> </div> <!-- .paintweb_tabPanel_main -->
@ -298,13 +123,17 @@ let xhtml = `<div xmlns="http://www.w3.org/1999/xhtml">
</div> </div>
<ol class="paintweb_colormixer_hexalpha"> <ol class="paintweb_colormixer_hexalpha">
<li><label>HEX <li>
<input id="ckey_hex" value="#RRGGBB" type="text" maxlength="7" <label>HEX
pattern="#[a-f0-9]{6}" /></label> <input id="ckey_hex" value="#RRGGBB" type="text" maxlength="7"
pattern="#[a-f0-9]{6}" />
</label>
</li> </li>
<li><label>Alpha <li>
<input id="ckey_alpha" value="100" type="number" min="0" max="100" <label>Alpha
step="1" /></label> <input id="ckey_alpha" value="100" type="number" min="0" max="100"
step="1" />
</label>
</li> </li>
</ol> </ol>
@ -418,5 +247,4 @@ let xhtml = `<div xmlns="http://www.w3.org/1999/xhtml">
</div> </div>
</div> </div>
<!-- vim:set spell spl=en fo=tcroqwanl1 tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix: -->
</div>`; </div>`;

78
src/main/webapp/resources/lib/fims/biz/paintweb/paintweb.js
Unescape Escape View File

@ -613,7 +613,8 @@ function PaintWeb (win, doc) {
this.commandRegister('selectionCrop', this.selectionCrop) && this.commandRegister('selectionCrop', this.selectionCrop) &&
this.commandRegister('selectionFill', this.selectionFill) && this.commandRegister('selectionFill', this.selectionFill) &&
this.commandRegister('selectionForNumberPlate', this.selectionForNumberPlate) && this.commandRegister('selectionForNumberPlate', this.selectionForNumberPlate) &&
this.commandRegister('imageRotate', this.imageRotate) && this.commandRegister('imageRotateRight', this.imageRotateRight) &&
this.commandRegister('imageRotateLeft', this.imageRotateLeft) &&
this.commandRegister('imageBright', this.imageBright) && this.commandRegister('imageBright', this.imageBright) &&
this.commandRegister('imageDark', this.imageDark) && this.commandRegister('imageDark', this.imageDark) &&
this.commandRegister('imageSave', this.imageSave) && this.commandRegister('imageSave', this.imageSave) &&
@ -2505,52 +2506,63 @@ function PaintWeb (win, doc) {
return true; return true;
}; };
/** /**
* image rotation. add by gujc. * image rotation. add by gujc.
*/ */
this.imageRotateLeft = function() {
_self.imageRotate(false);
};
this.imageRotate = function (type) { this.imageRotateRight = function() {
var layerCanvas = _self.layer.canvas, _self.imageRotate(true);
};
this.imageRotate = function(clockwise){
var layerCanvas = _self.layer.canvas,
layerCtx = _self.layer.context, layerCtx = _self.layer.context,
bufferCanvas = _self.buffer.canvas, bufferCanvas = _self.buffer.canvas,
bufferCtx = _self.buffer.context, bufferCtx = _self.buffer.context,
img = _self.image; img = _self.image;
var bufferStyle = _self.buffer.canvas.style; var bufferStyle = _self.buffer.canvas.style;
var layerStyle = layerCanvas.style; var layerStyle = layerCanvas.style;
var srcCanvas = doc.createElement('canvas');
var srcCtx=srcCanvas.getContext("2d");
var srcCanvas = doc.createElement('canvas'); srcCanvas.height = layerCanvas.width;
var srcCtx=srcCanvas.getContext("2d"); srcCanvas.width = layerCanvas.height;
srcCtx.translate(layerCanvas.height/2,layerCanvas.width/2);
if(clockwise){
srcCtx.rotate(90*Math.PI/180);
} else {
srcCtx.rotate(-90*Math.PI/180);
}
srcCanvas.height = layerCanvas.width; srcCtx.drawImage(layerCanvas,-layerCanvas.width/2,-layerCanvas.height/2);
srcCanvas.width = layerCanvas.height;
srcCtx.translate(layerCanvas.height/2,layerCanvas.width/2);
srcCtx.rotate(90*Math.PI/180);
srcCtx.drawImage(layerCanvas,-layerCanvas.width/2,-layerCanvas.height/2);
var lineWidth = bufferCtx.lineWidth; var lineWidth = bufferCtx.lineWidth;
var strokeStyle = bufferCtx.strokeStyle; var strokeStyle = bufferCtx.strokeStyle;
var fillStyle = bufferCtx.fillStyle; var fillStyle = bufferCtx.fillStyle;
layerCanvas.width = bufferCanvas.width = srcCanvas.width; layerCanvas.width = bufferCanvas.width = srcCanvas.width;
layerCanvas.height = bufferCanvas.height = srcCanvas.height; layerCanvas.height = bufferCanvas.height = srcCanvas.height;
bufferCtx.lineWidth = layerCtx.lineWidth = lineWidth; bufferCtx.lineWidth = layerCtx.lineWidth = lineWidth;
bufferCtx.strokeStyle = layerCtx.strokeStyle = strokeStyle; bufferCtx.strokeStyle = layerCtx.strokeStyle = strokeStyle;
bufferCtx.fillStyle = layerCtx.fillStyle = fillStyle; bufferCtx.fillStyle = layerCtx.fillStyle = fillStyle;
layerCtx.drawImage(srcCanvas, 0, 0); layerCtx.drawImage(srcCanvas, 0, 0);
img.width = layerCanvas.width; img.width = layerCanvas.width;
img.height = layerCanvas.height; img.height = layerCanvas.height;
bufferStyle.width = layerStyle.width = (layerCanvas.width * img.canvasScale) + 'px'; bufferStyle.width = layerStyle.width = (layerCanvas.width * img.canvasScale) + 'px';
bufferStyle.height = layerStyle.height = (layerCanvas.height * img.canvasScale) + 'px'; bufferStyle.height = layerStyle.height = (layerCanvas.height * img.canvasScale) + 'px';
_self.events.dispatch(new appEvent.canvasSizeChange(bufferCanvas.width * img.canvasScale, bufferCanvas.height * img.canvasScale, img.canvasScale)); _self.events.dispatch(new appEvent.canvasSizeChange(bufferCanvas.width * img.canvasScale, bufferCanvas.height * img.canvasScale, img.canvasScale));
pw.image.modified = true; pw.image.modified = true;
return true; return true;
}; }
/** /**
* 밝기 조절(이미지 밝게) * 밝기 조절(이미지 밝게)

2
src/main/webapp/resources/lib/fims/biz/paintweb/style/style.css
Unescape Escape View File

@ -999,8 +999,6 @@
.paintweb_cmd_imageSave a { background-image: url('icons/i_save.png') } .paintweb_cmd_imageSave a { background-image: url('icons/i_save.png') }
.paintweb_cmd_imageRotate a { background-image: url('icons/i_rotation.png') }
.paintweb_cmd_imageClear a { background-image: url('icons/i_delete.png') } .paintweb_cmd_imageClear a { background-image: url('icons/i_delete.png') }
.paintweb_cmd_about { .paintweb_cmd_about {

Write Preview
Loading…
Cancel
Save