Рисуем в 1С

02.10.20

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

Скачать файл

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки, "строительные материалы" для учетной системы. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование		По подписке [?]	Купить один файл
Рисуем в 1С: .epf 9,04Kb ver:20.10.01 101	101	Скачать (1 SM)	Купить за 1 850 руб.

На самом деле в обработке показан небольшой пример, как можно использовать 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

+88 –

См. также

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

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

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

6000 руб.

16.01.2015 63217 44 59

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

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

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

2400 руб.

29.06.2020 19075 26 6

Настройки управляемых форм (списков, объектов), заполнение реквизитов по условиям, контроль заполнения, доступ [Расширение]

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

Настройки упр.форм (списков, объектов), заполнение реквизитов по условиям, контроль заполнения, условное оформление, доступ.

2000 руб.

20.02.2018 20719 24 21

Редактор графов в 1С

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

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

1500 руб.

06.10.2020 10413 7 7

Дизайн Гайд для создания форм на 1С. Когда и как использовать различные элементы, примеры и антипримеры по использованию

Работа с интерфейсом Программист Стажер Платформа 1С v8.3 Бесплатно (free)

Это инструкция по дизайну форм в среде 1С. Гайд охватывает рекомендации и стандарты для оптимизации пользовательского интерфейса. В гайде содержатся указания по использованию элементов интерфейса, включая как основные, так и продвинутые аспекты. Предоставляются также примеры и антипримеры для наглядного понимания принципов дизайна

20.08.2024 18321 mrXoxot 43

122

Прогресс-бар в поле динамического списка

Работа с интерфейсом Программист Платформа 1С v8.3 Бесплатно (free)

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

27.05.2024 8391 smielka 37

102

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

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

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

27.12.2023 15770 1033 elcoan 50

117

Обработка для верстки html-страниц и отладки javascript. Отлично подойдет для быстрого создания интерактивных HTML-страниц тем, кто слабо знаком с веб-разработкой.

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

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

2 стартмани

10.04.2023 12121 165 acces969 31

124

Комментарии

Подписаться на ответы Инфостарт бот

Свернуть все

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 68 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 279 17.05.17 08:50 Сейчас в теме

Ошибка 8.3.9.1818

Прикрепленные файлы:

9. pallid 272 17.05.17 10:11 Сейчас в теме

(6) делал в 8.3.10.2168, сегодня проверю на Вашей версии платформы

10. pallid 272 17.05.17 22:57 Сейчас в теме

(6) к сожалению в платформе 8.3.9.1818 ошибка не воспроизвелась...

11. zhuravlev_as 437 24.05.17 15:02 Сейчас в теме

Главное, чтобы еще у пользователя не стояло запрета на открытие внешних отчетов и обработок из файлов.

12. b.ustimov@efsol.ru 02.06.17 11:52 Сейчас в теме

Интересно

14. vano-ekt 124 26.07.17 19:24 Сейчас в теме

15. jameswade 03.05.18 16:29 Сейчас в теме

Подскажите, в веб-клиенте работает ваш пример?

16. pallid 272 03.05.18 16:36 Сейчас в теме

(15) не подскажу, не проверял

31. pallid 272 02.10.20 10:44 Сейчас в теме

(15) уже работает

17. sansanih 03.05.18 16:41 Сейчас в теме

Когда скучно в 1с можно поиграть. Как-то писал своим бухам разминку для ума и зрения. На УФ. Прикольно все в восторге.

18. ROM_NN 85 13.07.18 10:52 Сейчас в теме

Автору респект за пример!
Есть вполне практическая потребность в подобной реализации на проекте.
Но при экспериментах с обработкой столкнулся вот с каким неприятным моментом...
Пока рисуем на пустом поле canvas - всё идеально отрабатывает и сохраняется результат.
Но как только в canvas подсовываем картинку в качестве подложки для рисования - то само рисование идёт прекрасно, а вот сохранить результат уже невозможно.
Выдаёт ошибку SecurityError и не сохраняет (см. скрин).

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

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

То нормально проглатывает и сохраняется всё!
Переводить картинку каждый раз в строку или есть какие-то обходные пути?
Может кто сталкивался?

Прикрепленные файлы:

19. pallid 272 13.07.18 11:09 Сейчас в теме

(18) да, брать двоичные данные, если поменялись сохраняем в файл результат работы

20. pallid 272 13.07.18 11:11 Сейчас в теме

(18) как на примере с ДО, в любом случаи мы должны сохранить новую версию файла, если поменяли ее

21. pallid 272 13.07.18 11:13 Сейчас в теме

Есть вполне практическая потребность в подобной реализации на проекте.

можно пример функциональности? просто интересно какую задачу можно решать

22. ROM_NN 85 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 272 04.02.20 15:14 Сейчас в теме

(25) вот комментарий из переписки, я его не проверял

Вопрос решил
ОкноБраузера = ДокументПервогоБраузера.parentWindow;
заменил
ОкноБраузера = ДокументПервогоБраузера.defaultView;

27. vasiliy_09_05 6 07.02.20 11:41 Сейчас в теме

Доброго времени суток.
Да, изменение кода помогло, спасибо.

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

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

Заранее спасибо за подсказки :)

28. Deda 444 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 272 01.10.20 13:11 Сейчас в теме

(28) спасибо Вам большое!!!

В ближайшее время обновлю статью

30. pallid 272 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 272 28.05.21 16:52 Сейчас в теме

(32) добрый день

посмотрите на переписку выше http://forum.infostart.ru/forum9/topic170940/message2014678/#message2014678

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);
                }

Показать

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

36. astema_sh 19.09.24 13:15 Сейчас в теме

(35) Добрый день! Добавил ваш код, чтобы подставить картинку вместо белого фона

| var img = new Image();
| img.src = ""data:image/png;base64,"+СтрокаBase64+""";
| img.on load = function(){
| context.drawImage(img, 0, 0,800, 600);
| };

Все равно выдается белый фон, рисования не происходит, а при попытке сохранить выдается ошибка "метод не обнаружен saveCanvas"
Прикрепляю полный текст html. Подскажите, пожалуйста, что сделано не так.

Прикрепленные файлы:

Рисование1С.txt