Рисуем в 1С

02.10.20

Разработка - Работа с интерфейсом

Вдруг захотелось порисовать в paint, а его использование заблокировано корпоративными политиками. Бывало такое? Тогда прошу под кат...

Скачать файлы

Наименование Файл Версия Размер
Рисуем в 1С:
.epf 9,04Kb
95
.epf 20.10.01 9,04Kb 95 Скачать

На самом деле в обработке показан небольшой пример, как можно использовать js в 1C. Реализована возможность выбирать цвет и размер пера для рисования. Работает в тонком клиенте, веб-клиенте и в тонком клиенте мобильного приложения. 
 

В js части есть:

function saveCanvas() {
    imageCopy = canvas.toDataURL();
} 

Как ее можно использовать в 1С:

&НаКлиенте
Процедура Сохранить(Команда)
	
	ОкноБраузера = ПолучитьОкноБраузера();
	ОкноБраузера.saveCanvas(); //Выполняем js функцию
	СырыеДанные = ОкноБраузера.imageCopy; //Читаем значение переменной из js
	СтрокаДанные = СтрЗаменить(СырыеДанные, "data:image/png;base64,", "");
	
	Если Модифицированость Тогда
		ДвоичныеДанные = Base64Значение(СтрокаДанные);
		Файл = ПолучитьИмяВременногоФайла("png");
		ДвоичныеДанные.Записать(Файл);
		Сообщить("данные сохранены");
	Иначе
		Сообщить("нет данных для сохранения");
	КонецЕсли; 
	
КонецПроцедуры

&НаКлиенте
Функция ПолучитьОкноБраузера()
	ДокументПервогоБраузера = Элементы.Реквизит1.Документ;
	ОкноБраузера = ДокументПервогоБраузера.parentWindow; // IE
	Возврат ОкноБраузера;
КонецФункции

подобным способом можно реализовать решение задач, например:

  • для систем учета задач сделать возможным выделять на скриншотах WTF участки для людей, получивших задачу, или ЧЯДНТ для самих авторов задач
  • ввод рукописного текста с сенсорных экранов (а вдруг...)

При этом получается, что нет необходимости запускать стороннюю программу, все делаем в 1С.


Благодарности:

 - За возможность работы в тонком клиенте мобильного приложения спасибо Дмитрию Краснопольскому

 - Андрей Иванов помог решить вопрос с переходом платформы на webkit

javascript 1C JS paint

См. также

Богатый редактор картинок, хранимых в базе, с возможностью РИСОВАНИЯ. Редактор внешних файлов картинок. Объект, расширяющий возможности работы с картинками из встроенного языка (Три в одном) + Обработка «Стандартизация картинок»

Работа с интерфейсом Рабочее место Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Обработка предназначена для редактирования картинок в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Также обработка может быть использована из встроенного языка как объект для редактирования картинок. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Данная обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015    61792    43    59    

80

[Расширения] Динамическое управление видимостью и доступностью элементов форм (УФ) (8.3.6+)

Работа с интерфейсом Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Механизм «Динамическое управление доступом к элементам форм объектов 1С8» предназначен для обеспечения возможности оперативного управления видимостью и доступностью элементов форм документов и справочников продуктов фирмы «1С» «1С:Предприятие 8». Решение универсальное, встраивается в любую конфигурацию с минимальными доработками, что позволяет без проблем обновлять типовые решения.

5000 руб.

14.01.2016    54394    16    21    

42

Управление дашбордами

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020    16694    21    4    

35

Новогоднее оформление для 1С

Работа с интерфейсом Платформа 1С v8.3 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Зарплата и Управление Персоналом 3.x 1С:Управление нашей фирмой 3.0 Бесплатно (free)

Добавьте новогоднего настроения! Расширение создает декорацию в виде гирлянды на некоторых формах объектов.

27.12.2023    10732    750    elcoan    45    

106

Конструктор HTML, CSS и javascript

Инструментарий разработчика Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

Подходит для создания web-страниц для замены управляемых форм 1С, красивых отчетов, интерфейса мобильного приложения на платформе 1С и для простых страниц веб-сайтов.

2 стартмани

10.04.2023    9606    151    acces969    31    

118

Модель состояния для MVC

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

"MVC плохо применима в 1С" - познакомьтесь с моделью состояния и, возможно, ваше мнение поменяется! Представленное решение является эволюционным развитием идеи реализации MVC для 1С. В новой версии добавлены DSL для описания модели состояния, а также параметризация свойств параметров и элементов формы.

1 стартмани

05.07.2022    3662    kalyaka    2    

27

Табло очереди заказов на экран телевизора

WEB-интеграция Работа с интерфейсом Платформа 1С v8.3 1С:Розница 2 Платные (руб)

Связка из веб-приложения и расширения для 1С: Розница 2.3.

3600 руб.

29.04.2022    12077    1    5    

10
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. Hamsik 13 12.05.17 10:56 Сейчас в теме
Спасибо, как то была мысль реализовать на УФ графический редактор , может вернусь к этому)
2. BigBoss 2 17.05.17 07:36 Сейчас в теме
3. PROF1L 16 17.05.17 08:19 Сейчас в теме
А не было ли у кого-то мысли рисовать структурами? Например склады или магазины и их взаимодействие друг с другом?
5. ABudnikov 3 17.05.17 08:46 Сейчас в теме
(3) А чем графическая схема не подходит?
7. PROF1L 16 17.05.17 08:57 Сейчас в теме
(5)Для нисходящей конструкции все здорово. Но если добавить ветвления, то возникает много неприятных моментов, с добавлением связей снизу вверх и самими ветвлениями . Это все конечно можно реализовать, но должна быть очень хорошо продуманная логика добавления и связывания каждого элемента. Нужно всегда понимать где находится элемент1 и элемент2 и как их связать минуя все ранее нарисованные элементы. Да еще это более менее красиво должно выглядеть для пользователя( не набором непонятных элементов).

Возможно конечно я использовал не самый "матерый" вариант (обработка http://infostart.ru/public/102902/), но работать с графической схемой мягко говоря не очень. В наш век, когда 1С взаимосвязана с многими языками и когда для создателей сайтов уже существуют всякие скрипты, которые существенно облегчают эту задачу 1С как-то явно просела в этом вопросе(конечно визуально приятно все это создавать, однако программно очень трудоемко)

Отсюда и вопрос, возможно кто-то уже использовал некие внешние компоненты или знает какие-то более простые способы построения подобных схем. Я был бы очень рад получить ответ.
8. ABudnikov 3 17.05.17 09:56 Сейчас в теме
(7) Ну так это разные задачи. Автоматически сформировать понятную для человека схему и от руки нарисовать ту же самую схему.
Автоматически - это сложно, а вот вручную можно рисовать в той же графической схеме. Там есть инструменты для рисования связанных объектов.
И сразу можно оценить насколько понятна отображаемая схема
13. s_vidyakin 63 26.07.17 13:28 Сейчас в теме
(7) Есть несколько библиотек на JS для рисования диаграмм, на входе надо всего лишь дерево узлов и связей в JSON. Можно таскать мышкой узлы и добавлять дополнительные подписи и прочую инфу в узлы. Например навигационную ссылку на объекты 1С. Простор для фантазии огромен, была бы задача
Например http://visjs.org/network_examples.html
4. PROF1L 16 17.05.17 08:22 Сейчас в теме
Есть такая мысль, вопрос только как реализовать
6. Oleg_nsk 277 17.05.17 08:50 Сейчас в теме
Ошибка 8.3.9.1818
Прикрепленные файлы:
9. pallid 270 17.05.17 10:11 Сейчас в теме
(6) делал в 8.3.10.2168, сегодня проверю на Вашей версии платформы
10. pallid 270 17.05.17 22:57 Сейчас в теме
(6) к сожалению в платформе 8.3.9.1818 ошибка не воспроизвелась...
11. zhuravlev_as 392 24.05.17 15:02 Сейчас в теме
Главное, чтобы еще у пользователя не стояло запрета на открытие внешних отчетов и обработок из файлов.
12. b.ustimov@efsol.ru 02.06.17 11:52 Сейчас в теме
14. vano-ekt 123 26.07.17 19:24 Сейчас в теме
15. jameswade 03.05.18 16:29 Сейчас в теме
Подскажите, в веб-клиенте работает ваш пример?
16. pallid 270 03.05.18 16:36 Сейчас в теме
(15) не подскажу, не проверял
31. pallid 270 02.10.20 10:44 Сейчас в теме
17. sansanih 03.05.18 16:41 Сейчас в теме
Когда скучно в 1с можно поиграть. Как-то писал своим бухам разминку для ума и зрения. На УФ. Прикольно все в восторге.
18. ROM_NN 84 13.07.18 10:52 Сейчас в теме
Автору респект за пример!
Есть вполне практическая потребность в подобной реализации на проекте.
Но при экспериментах с обработкой столкнулся вот с каким неприятным моментом...
Пока рисуем на пустом поле canvas - всё идеально отрабатывает и сохраняется результат.
Но как только в canvas подсовываем картинку в качестве подложки для рисования - то само рисование идёт прекрасно, а вот сохранить результат уже невозможно.
Выдаёт ошибку SecurityError и не сохраняет (см. скрин).

В интернете нашел много упоминаний, что таким образом IE борется за безопасность. Но что с этим можно сделать, если рисовать надо именно поверх картинки - вот вопрос.

Опытным путём установили, что ругается, если фон в canvas подсовывать в виде локального файла или web-ссылки на картинку.
А если в виде строки base64 (пример):
image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4­//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

То нормально проглатывает и сохраняется всё!
Переводить картинку каждый раз в строку или есть какие-то обходные пути?
Может кто сталкивался?
Прикрепленные файлы:
19. pallid 270 13.07.18 11:09 Сейчас в теме
(18) да, брать двоичные данные, если поменялись сохраняем в файл результат работы
20. pallid 270 13.07.18 11:11 Сейчас в теме
(18) как на примере с ДО, в любом случаи мы должны сохранить новую версию файла, если поменяли ее
21. pallid 270 13.07.18 11:13 Сейчас в теме
Есть вполне практическая потребность в подобной реализации на проекте.


можно пример функциональности? просто интересно какую задачу можно решать
22. ROM_NN 84 13.07.18 15:56 Сейчас в теме
(21) Пометки делать нужно на скриншотах, которые сохранены были ранее. Т.е. уже в справочнике картинка есть, сохранена в рамках другого процесса. И надо на ней пометки примитивные делать. Это не коммерческий проект - так, для внутренних нужд...
23. nytlenc 21.02.19 11:10 Сейчас в теме
Спасибо. Однозначно плюс. Очень пригодилось сегодня.
24. user1310166 27.11.19 12:40 Сейчас в теме
добрый день. а можно бесплатно воспользоваться данной обработкой?
25. vasiliy_09_05 6 04.02.20 14:37 Сейчас в теме
Доброго времени суток уважаемый автор.
Скачал Вашу обработку, но, к сожалению, при попытки сохранения картинки (или очистки canvas'а) - то есть при вызове функций скрипта возникает ошибка (во вложении).

Предполагаю, что это связано с изменениями в платформы (у меня 8.3.16.1063).

Никто не сталкивался с подобной ситуацией? Может быть кто-нибудь победил проблему?
Прикрепленные файлы:
26. pallid 270 04.02.20 15:14 Сейчас в теме
(25) вот комментарий из переписки, я его не проверял

Вопрос решил
ОкноБраузера = ДокументПервогоБраузера.parentWindow;
заменил
ОкноБраузера = ДокументПервогоБраузера.defaultView;
27. vasiliy_09_05 6 07.02.20 11:41 Сейчас в теме
Доброго времени суток.
Да, изменение кода помогло, спасибо.

Вот только новая беда - на Windows системах все отрабатывает отлично, а вот если запустить тонкий клиент на android из-под браузера, холст перестает рисовать :(

Может быть кто-либо сталкивался? Знает как исправить?

Заранее спасибо за подсказки :)
28. Deda 419 01.10.20 13:04 Сейчас в теме
(27) Решено! Теперь можно рисовать на мобильном клиенте по экрану (сенсору) пальцем. :-)

Вот этих строк не хватало:
| 			  // Добавка!!! Тач-сенсорная подпись (
			 |	function drawmove(e) {
    		 |	if (isDrawing) return;
    		 |	context.lineTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
   			 |	context.stroke();
  			 |	}
			 |	function touchmove(e) { drawmove(e.touches[0]); e.preventDefault(); }
			 |           // Окончание )

Вот весь доработанный рабочий код:
Текст = "<!DO CTYPE html>
			 |<ht ml>
             |<head>
			 |<met a http-equiv='X-UA-Compatible' content='IE=edge'> 
             |    <st yle>
             |        body {
             |            background: white;
             |        }
             |        
             |        .Toolbar {
             |            float: left;
             |            font-family: ''Trebuchet MS'';
             |            font-size: 14px;
             |            font-variant: small-caps;
             |            text-align: center;
             |            background: #F2F7FE;
             |            padding: 10px 15px 3px 10px;
             |            margin-bottom: 1px;
             |            margin-right: 1px;
             |            border: 1px solid #7B899B;
             |        }
             |        
             |        .Toolbar button {
             |            padding: 6px;
             |            margin: 7px 2px;
             |            font-variant: normal;
             |            font-size: 12px;
             |        }
             |        
             |        .CanvasContainer {
             |            clear: both;
             |        }
             |        
             |        canvas {
             |            border: 1px solid #7B899B;
             |        }
             |        
             |        img {
             |            padding: 2px;
             |            border: 2px solid #F2F7FE;
             |        }
             |        
             |        img:hover {
             |            border: 2px groove #E4F0FE;
             |            background: white;
             |        }
             |        
             |        img.Selected {
             |            border: 2px groove #E4F0FE;
             |        }
             |        
             |        #savedCopyContainer {
             |            display: none;
             |        }
             |        
             |        #savedCopyContainer img {
             |            width: 250px;
             |            height: 150px;
             |        }
             |    </style>
             |    <sc ript>
             |        var canvas;
             |        var context;
			 |        var isDrawing;
             |        var imageCopy;
			 |
             |        window.on load = function () {
             |            canvas = document.getElementById('drawingCanvas');
             |            context = canvas.getContext('2d');
             |
             |            // Подключаем требуемые для рисования события
             |            canvas.on mousedown = startDrawing;
             |            canvas.on mouseup = stopDrawing;
             |            canvas.on mouseout = stopDrawing;
             |            canvas.on mousemove = draw;
			 |            canvas.on touchmove = touchmove;[/B]
			 |              
			 |			  changeColor('rgb(0,86,166)');
			 |			  changeThickness(1);
             |        }
             |
             |
             |        function changeColor(color) {
             |            // 	Меняем текущий цвет рисования
             |            context.strokeStyle = color;
             |        }
             |
             |        function changeThickness(thickness, imgElement) {
             |            // Изменяем текущую толщину линии
             |            context.lineWidth = thickness;
			 |        }
             |
             |        function startDrawing(e) {
             |            // Начинаем рисовать
             |            isDrawing = true;
             |
             |            // Создаем новый путь (с текущим цветом и толщиной линии) 
             |            context.beginPath();
             |
             |            // Нажатием левой кнопки мыши помещаем ""кисть"" на холст
             |            context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
             |        }
			 | 
			 | 			  // Добавка!!! Тач-сенсорная подпись (
			 |	function drawmove(e) {
    		 |	if (isDrawing) return;
    		 |	context.lineTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
   			 |	context.stroke();
  			 |	}
			 |	function touchmove(e) { drawmove(e.touches[0]); e.preventDefault(); }
			 |           // Окончание )
			 |
             |        function draw(e) {
             |            if (isDrawing == true) {
             |                // Определяем текущие координаты указателя мыши
             |                var x = e.pageX - canvas.offsetLeft;
             |                var y = e.pageY - canvas.offsetTop;
             |
             |                // Рисуем линию до новой координаты
             |                context.lineTo(x, y);
             |                context.stroke();
             |            }
             |        }
             |
			 |        function stopDrawing() {
			 |            isDrawing = false;
			 |        }
			 |
			 |        function clearCanvas() {
			 |            context.clearRect(0, 0, canvas.width, canvas.height);
             |        }
             |
             |        function saveCanvas() {
             |
             |            // Отображаем данные холста в элементе <img>
             |            imageCopy = canvas.toDataURL();
             |
             |        }
             |    </sc ript>
             |</head>
             |<body>
             |    <div class=""CanvasContainer"">
             |        <canvas id=""drawingCanvas"" width=""320"" height=""240""></canvas>
             |    </div>
             |</body>
             |</html>";
Показать
Прикрепленные файлы:
CanvasTouch_1C.txt
29. pallid 270 01.10.20 13:11 Сейчас в теме
(28) спасибо Вам большое!!!

В ближайшее время обновлю статью
30. pallid 270 02.10.20 10:15 Сейчас в теме
Обновил статью и обработку
- добавление тач-сенсорной подписи
- правка работы с временными файлами для веб-клиента
- правка для работы под webkit

Благодарности:
- За возможность работы в тонком клиенте мобильного приложения спасибо Дмитрию Краснопольскому
- Андрей Иванов помог решить вопрос с переходом платформы на webkit

Завел репозиторий https://github.com/pallid/paint-to-onec
32. dndw 6 28.05.21 16:49 Сейчас в теме
Подскажите пожалуйста каким образом можно в качестве фона для рисования использовать какую либо картинку и сохранять полученный результат.
Сейчас вывод картинки делаю через добавления в код
canvas {
    |width: 640;
    |height: 480;
   | border: solid 1px black;
   | background: url('file:C:/Users/Pictures/12.png') no-repeat;    
|}

где, C:/Users/Pictures/12.png - нужная картинка
картинка выводится рисунок рисуется, а в результате сохранения получается только белый фон с рисунком, без картинки.
33. pallid 270 28.05.21 16:52 Сейчас в теме
34. dndw 6 28.05.21 17:11 Сейчас в теме
(33) если выводить через base64 результат получается тот же самый. Картинка выводится, рисование идет, а в сохраненном файле только рисунок на белом фоне. Возможно картинку не там вывожу?
35. dndw 6 29.05.21 12:50 Сейчас в теме
Похоже действительно вывод картинки делал не так ка нужно.
Внес изменения
 window.on load = function () {
	canvas = document.getElementById('drawingCanvas');
	context = canvas.getContext('2d');
	
	// Добавленный код (вывод холста в виде картинки)
	var img = new Image();
	img.src = ""data:image/png;base64,"+СтрокаBase64+"""; // СтрокаBase64 - закодированная картинка
	img.on load = function() {
		context.drawImage(img, 0, 0,800, 600); 
		};
      // Добавленный код --
	
       // Подключаем требуемые для рисования события
	canvas.on mousedown = startDrawing;
        canvas.on mouseup = stopDrawing;
        canvas.on mouseout = stopDrawing;
        canvas.on mousemove = draw;
	changeColor('rgb(212,21,29)');
       changeThickness(1);
                }
Показать

После внесенных изменений, рисунок начал сохранятся вместе с картинкой.
Оставьте свое сообщение