Форум программистов, компьютерный форум, киберфорум
JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/40: Рейтинг темы: голосов - 40, средняя оценка - 4.75
0 / 0 / 1
Регистрация: 23.10.2015
Сообщений: 5

Создание границы Canvas, за которую не должны выходить объекты

11.03.2016, 15:06. Показов 7874. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Люди помогите, уже не знаю сколько времени мучаюсь и все никак не могу создать границы в Canvas.
Суть в чем: есть редактор визиток, объекты перемещаются по холсту и заходят за видимые пределы холста. Нужно сделать границу за которую не будут выходить объекты. Пример тут: http://const.pp.ua/obsh/9/
Если нужен код, могу показать. Сразу, спасибо за помощь.
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
11.03.2016, 15:06
Ответы с готовыми решениями:

Не выходить за границы формы
Есть image и есть form'a. От меня требуется сделать так, чтобы картинка не выходила за границы формы. Поясню. Я перемещаю имейдж по...

Не выходить за границы массива
Здравствуйте! Я новичок и ещё только учусь. Я смог создать массив и заполнить его случайными числами от 1 до 100. Теперь я хотел бы вывести...

Запретить внутреннему диву выходить за границы родительского
Есть главный блок container,внутри него resize он может изменять свои размеры,подскажите как можно сделать так,что бы он не изменял размеры...

2
Superposition
 Аватар для Padimanskas
950 / 615 / 256
Регистрация: 27.10.2013
Сообщений: 2,083
11.03.2016, 23:09
Лучший ответ Сообщение было отмечено Fakt0r как решение

Решение

Fakt0r,
Для fabric.js
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
canvas.observe('object:moving', function (e) {
    var obj = e.target, // Перемещаемый объект
    canvas = obj.canvas,
    bound = obj.getBoundingRect(); // Границы объекта
 
    obj.setCoords();
 
    if ((bound.top + bound.height) > canvas.height) {...} // Если выходит за нижнюю границу
 
    if ((bound.left + bound.width) > canvas.width) {...} // Если выходит за правую границу
 
    if (bound.top < 0) {...} // Если выходит за верхнюю границу
 
    if (bound.left < 0) {...} // Если выходит за левую границу
 
});
1
0 / 0 / 1
Регистрация: 23.10.2015
Сообщений: 5
12.03.2016, 00:16  [ТС]
Спасибо большое) Уже сделал в подобном духе. Вот код:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
designCanvasFront.on('object:moving', function (e) { 
var obj = e.target; 
// if object is too big ignore 
if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){ 
return; 
} 
obj.setCoords(); 
// top-left corner 
if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){ 
obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top); 
obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left); 
} 
// bot-right corner 
if(obj.getBoundingRect().top+obj.getBoundingRect().height > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width > obj.canvas.width){ 
obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top); 
obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left); 
} 
});
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
12.03.2016, 00:16
Помогаю со студенческими работами здесь

Как запретить дочернему блоку выходить за границы экрана
Добавил на страницу сплитер, чтобы изменять ширину блоков. С левым блоком все хорошо, но когда двигаю сплитер вправо, правый блок уходит за...

Как заставить объект, передвигаемый кнопками, не выходить за границы формы?
Как заставить объект, двигаемый кнопками, не выходить за границы формы?

Выход объектов за границы Canvas
Всем здравствуйте. Есть форма на которой находится: &lt;StackPanel x:Name=&quot;Panel&quot; HorizontalAlignment=&quot;Left&quot;...

какие объекты должны быть в моей программе?
Здравствуйте! Хочу написать программу. Точнее пишу, или даже уже написал =). Не могу понять как я могу использовать ООП. Суть в...

объекты Canvas
Изобразите окружность диаметром d, перемещающуюся по вертикали через центр экрана.


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Модульная разработка через nuget packages
DevAlt 07.03.2026
Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F#
DevAlt 06.03.2026
В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование
8Observer8 05.03.2026
Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D
8Observer8 04.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий
8Observer8 02.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии
Hrethgir 01.03.2026
Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни
kumehtar 27.02.2026
Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten
8Observer8 27.02.2026
Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru