рипается без проблем. сохраните 2 js файла из папки /skineditor/ и 1 css файл из той же папки. Откройте файл editor.js и /skineditor/css/styles.css найдите в этих файлах все картинки и сохраните в /skineditor/images/
1. Папку /skineditor/ со всеми каталогами и файлами разместить в корне сайта
2. это разместить на сайте в нужном месте
| Код |
|---|
<link rel="stylesheet" href="/skineditor/css/styles.css">
<script src="/skineditor/js/skineditor.js"></script>
<div class="container">
<div id="skineditor-actions">
<a id="skin-download" class="btn change" download="skin.png"><i class="fa fa-save"></i>Сохранить</a>
<a id="skin-clean" class="btn change"><i class="fa fa-ban"></i>Очистить</a>
<form>
<label class="btn" for="load_skin"><i class="fa fa-upload"></i>Загрузить</label>
<input type="file" id="load_skin" name="load_skin" style="display:none"/>
</form>
<form enctype="multipart/form-data" action="/testkraft.html" method="POST"
style="display:none">
<input type="hidden" name="skin_image_data"/>
<input type="submit" value="Загрузить" id="form_submit" style="display:none"/>
</form>
</div>
<div id="skineditor">
<div id="canvas"></div>
<div class="conf">
<div id="bodyparts">
<div class="bodyparts">
<span>Туловище</span>
<div class="bodypart head" data-bodypart="head" data-layer="base"></div>
<div class="bodypart torso" data-bodypart="torso" data-layer="base"></div>
<div class="bodypart arm_left" data-bodypart="left_arm" data-layer="base"></div>
<div class="bodypart arm_right" data-bodypart="right_arm" data-layer="base"></div>
<div class="bodypart leg_left" data-bodypart="left_leg" data-layer="base"></div>
<div class="bodypart leg_right" data-bodypart="right_leg" data-layer="base"></div>
</div>
<div class="bodyparts">
<span style="padding-left: 6px;">Второй слой</span>
<div class="bodypart head hidden" data-bodypart="head" data-layer="overlay"></div>
<div class="bodypart torso hidden" data-bodypart="torso" data-layer="overlay"></div>
<div class="bodypart arm_left hidden" data-bodypart="left_arm"
data-layer="overlay"></div>
<div class="bodypart arm_right hidden" data-bodypart="right_arm"
data-layer="overlay"></div>
<div class="bodypart leg_left hidden" data-bodypart="left_leg"
data-layer="overlay"></div>
<div class="bodypart leg_right hidden" data-bodypart="right_leg"
data-layer="overlay"></div>
</div>
</div>
</div>
<div id="skineditor-controls"><div align="center">Если зажать правую кнопку мыши - пермещение скина, если левую вне скина - вращение.</div>
<div id="skineditor-tools">
<a href="#" class="tool active" id="brush" title="Кисть">
<i class="fa fa-paint-brush"></i>
</a>
<a href="#" class="tool" id="eyedropper" title="Пипетка, позволят узнать цвет">
<i class="fa fa-eyedropper"></i>
</a>
<a href="#" class="tool" id="fill" title="Заливка">
<i class="fa fa-tint"></i>
</a>
<a href="#" class="tool" id="eraser" title="Ластик, убирает любой цвет, работает только на 2 слое">
<i class="fa fa-eraser"></i>
</a>
<a href="#" id="zoomout" title="Уменьшение">
<i class="fa fa-search-minus"></i>
</a>
<a href="#" id="zoomin" title="Увеличение">
<i class="fa fa-search-plus"></i>
</a>
<a href="#" id="reset-view" title="Сбросить вид">
<i class="fa fa-camera"></i>
</a>
<a href="#" id="move" title="Переместить модель, зажми ЛКМ на кнопке и води">
<i class="fa fa-arrows-alt"></i>
</a>
<a href="#" class="inactive" id="undo" title="Отменить">
<i class="fa fa-undo"></i>
</a>
<a href="#" class="inactive" id="redo" title="Вернуть">
<i class="fa fa-redo"></i>
</a>
</div>
<div id="skineditor-colors">
<div class="color active" data-color="#0074d9"
style="background-color: rgb(0, 116, 217);"></div>
<div class="color" data-color="#7fdbff"
style="background-color: rgb(127, 219, 255);"></div>
<div class="color" data-color="#01ff70"
style="background-color: rgb(1, 255, 112);"></div>
<div class="color" data-color="#ffdc00"
style="background-color: rgb(255, 220, 0);"></div>
<div class="color" data-color="#ff851b"
style="background-color: rgb(255, 133, 27);"></div>
<div class="color" data-color="#ff4136"
style="background-color: rgb(255, 65, 54);"></div>
<div class="color" data-color="#f012be"
style="background-color: rgb(240, 18, 190);"></div>
<div class="color" data-color="#ffffff"
style="background-color: rgb(255, 255, 255);"></div>
<div class="color" data-color="#111111"
style="background-color: rgb(17, 17, 17);"></div>
</div>
<div id="skineditor-options">
<label>Положение:</label>
<select id="pose">
<option value="Default">Нормальное</option>
<option value="Walk">Ходьба</option>
<option value="Hug">Зарядка</option>
<option value="Run">Бег</option>
<option value="Fly">Полет</option>
</select>
<label for="showgrid">Сетка:</label><input type="checkbox" id="showgrid" checked>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/skineditor/js/editor.js"></script>
|
3. Если это DLE, то в нём уже подключен jquery.js и jqueryui.js , ели нет, то подключите сами.
4. Если вы не используете шрифты Font Awesome Icons, тогда подключите их вручную.
5. Готово!
06.03.2023 (22 дня назад)
24.03.2023 (4 дня назад)