URL скопирован в буфер обмена!
Как сделать эффект рисования в Zero Block?
С помощью данной модификации можно добавить в Zero Block холст на котором можно будет рисовать при помощи маркера. Модификация адаптирована под мобильные устройства.
Модификация обновлена. Появилась возможность добавить кнопку при клике на которую будет очищаться холст
Модификация не работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Название холста
Цвет маркера
Толщина маркера
Класс кнопки сброса
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD058--><div id="TiCodeCanvasContainerbg" style="position: relative; width: 100%; height: 100%;">
<canvas id="TiCanvasbg" style="width: 100%; height: 100%; background-color:transparent;">
</canvas>
</div>
<script>
var TiCodeContainerbg = document.getElementById("TiCodeCanvasContainerbg");
var Ticanvasbg = document.getElementById("TiCanvasbg"),
Ticontextbg = Ticanvasbg.getContext("2d");
Ticanvasbg.width = TiCodeContainerbg.clientWidth;
Ticanvasbg.height = TiCodeContainerbg.clientHeight;
var mousebg = { x: 0, y: 0 };
var drawbg = false;
function startDrawingbg(e) {
var rect = Ticanvasbg.getBoundingClientRect();
mousebg.x = e.clientX - rect.left;
mousebg.y = e.clientY - rect.top;
drawbg = true;
Ticontextbg.beginPath();
Ticontextbg.moveTo(mousebg.x, mousebg.y);
Ticontextbg.lineWidth = 3;
Ticontextbg.strokeStyle = "#000000";
Ticontextbg.lineJoin = "round";
Ticontextbg.lineCap = "round";
}
function drawLinebg(e) {
if (drawbg) {
var rect = Ticanvasbg.getBoundingClientRect();
mousebg.x = e.clientX - rect.left;
mousebg.y = e.clientY - rect.top;
Ticontextbg.lineTo(mousebg.x, mousebg.y);
Ticontextbg.stroke();
}
}
function stopDrawingbg() {
if (drawbg) {
Ticontextbg.closePath();
drawbg = false;
}
}
function clearCanvasbg() {
Ticontextbg.clearRect(0, 0, Ticanvasbg.width, Ticanvasbg.height);
}
Ticanvasbg.addEventListener("mousedown", startDrawingbg);
Ticanvasbg.addEventListener("mousemove", drawLinebg);
Ticanvasbg.addEventListener("mouseup", stopDrawingbg);
Ticanvasbg.addEventListener("touchstart", function (e) {
e.preventDefault();
startDrawingbg(e.touches[0]);
});
Ticanvasbg.addEventListener("touchmove", function (e) {
e.preventDefault();
drawLinebg(e.touches[0]);
});
Ticanvasbg.addEventListener("touchend", function (e) {
e.preventDefault();
stopDrawingbg(e);
});
$(document).ready(function() { $('.refresh').click(function(e) { e.preventDefault();
clearCanvasbg(); }); });
</script>
<style>
#TiCodeCanvasContainerbg:hover {
cursor: crosshair;
}
.refresh {
cursor: pointer;
}
</style>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем в Zero Block html контейнер
2. При необходимости создаем в зеро блоке кнопку для очистки холста. Для этого добавляем кноп и присваиваем ей класс refresh
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
3. Указываем в генераторе кода дополнительные настройки:
Название холста - любое краткое название;
Цвет маркера - указываем цветовой код для маркера;
Толщина маркера - указываем толщину кисти маркера. Минимально лучше указывать 3 так как если указать меньше, то будет сильно пиксельно;
Класс кнопки сброса - можно указать свой класс для кнопки сброса.
3. Копируем код из генератора и вставляем в html контейнер внутри Zero Block. Зона холста будет равна размерам контейнера. Для адаптации достаточно менять размер контейнера.
2. При необходимости создаем в зеро блоке кнопку для очистки холста. Для этого добавляем кноп и присваиваем ей класс refresh
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
3. Указываем в генераторе кода дополнительные настройки:
Название холста - любое краткое название;
Цвет маркера - указываем цветовой код для маркера;
Толщина маркера - указываем толщину кисти маркера. Минимально лучше указывать 3 так как если указать меньше, то будет сильно пиксельно;
Класс кнопки сброса - можно указать свой класс для кнопки сброса.
3. Копируем код из генератора и вставляем в html контейнер внутри Zero Block. Зона холста будет равна размерам контейнера. Для адаптации достаточно менять размер контейнера.
Customers Support
Alex Stark
Founder & Art Director
Max Holden
Design Director
Stefan Good
Наша команда
Попробуй что-то дорисовать на фото
