Drag angular drag что это

Как работает Drag в физике Unity

Осознавая что мои статьи похожи на восторг человека, впервые увидевшего какую-то (многим уже давно знакомую) вещь, все же решил написать очередную. Причина — заинтересовавший меня параметр drag у компонента Rigidbody. Объяснений и, тем более, формул — как он работает — руководства не дают. Поэтому разбираться придется самому.

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

При знакомстве с физикой в Unity первое, чему учат, это тому, что Rigidbody — воплощение физических свойств объекта. У него есть пара параметров, задающих его взаимодействие с окружающим миром. Собственно, наиболее значимый для динамических объектов: масса. С ней все интуитивно понятно: закон Ньютона и все такое… Приложили силу кратковременно — получили импульс и, соответственно, изменили скорость объекта. Прикладываем длительное время: получаем ускорение в зависимости от массы.

Кроме этого, у Rigidbody есть интересный параметр — drag. Выражаясь словами разработчиков: параметр drag задает drag объекта. На их языке drag — это замедление, торможение. Других объяснений — не дается. Говоря о физике и торможении, в голову приходит что-то из баллистики (аэродинамики, гидродинамики и пр.). Возможно, drag — это некий коэффициент, пропорциональный квадрату скорости. Это было бы разумно. Но.

Простой опыт показывает, что в Unity тела с большим значением drag не двигаются вообще. Гравитация на них не влияет, толкнуть их невозможно. Но при этом они стоят, то есть квадрат их скорости равен нулю. Значит тут все не так просто… или же, наоборот, не все так сложно. Физика в компьютерных играх должна просчитываться быстро, а значит возможны упрощения относительно реальной физической модели. Хотя реализовать игру, скажем, с релятивистскими эффектами было бы забавно…

Первый вопрос, которым я задался: хотя бы, масса в Unity ведет себя как масса? Эксперимент показал, что — да.

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

Расчетное время падения для него должно составлять: t = sqrt(2*h/g), где h — высота, g — ускорение свободного падения. В нашем случае (h=5м, g=9.81м/с^2) t ≈ 1.0096.
Запуск показал значение 1.02, что близко к нужному.

Встроенная гравитация — это хорошо. Хотелось бы проверить, не жульничает-ли она? Отключаем гравитацию для Rigidbody и взамен вручную создаем действующую силу:

Результат оказался тот же самый (t=1.02). Неплохо.

Для действующей силы были затем использованы несколько разных значения. И всегда изменение действующей силы (rb.AddForce(0, xxx, 0);) вызывало изменение времени «падения», совпадающее с расчетным. Так что модель взаимодействия сил и массы оказалась вполне знакомой, ньютоновской.

Далее для проверки и сравнения встроенного физического движка и имитируемого, я создал два шарика. Один двигался под действием гравитации, другой под действием скрипта. Причем в этот раз никаких сил не было. Изменения в скорости считались «вручную» в коде.

Для начала стоило проверить простое падение без замедления (drag=0). Код, двигающий второй шарик был довольно прост:

rb — это компонент Rigidbody сферы. gForceVector — вектор гравитации (0, 9.81, 0).

Пока все совпадает.

Теперь, левому шарику увеличиваем drag (drag=2). Он стал падать медленнее:

Интересный факт. Увеличение параметра drag до больших значений (бо́льших или равных примерно 50) приводило к тому, что шарик вообще не двигался. Изменение массы объекта никак не влияло на этот факт, что привело к мысли, что параметр drag — кинематический, то есть он зависит (и влияет) на положение, скорость, ускорение и т.д., не принимая в расчет силы или импульс.

Что еще могло влиять на алгоритм, где фигурировал drag? Возможно, частота обновления физики. Хотя это означало бы не самый лучший ход со стороны разработчиков. Но чем черт не шутит. Поменяем время обновления физики до 0.005 секунд.

Зависимость все же имеется. Однако, похоже, это вычислительные ошибки. Дальнейшие увеличения частоты обновления физики существенно время падения не меняют. Что, кстати, означает, что где-то в коде разработчиков должно быть что-то вроде «. *Time.fixedDeltaTime«.

Итак, что мы знаем про параметр drag? Он — кинематический (считается после действия всех сил). Умножается (хотя возможно и не он сам) на Time.fixedDeltaTime и уменьшает скорость. Самое простое, что можно было бы придумать с такими условиями, выглядит примерно так:

Новое действие выглядит довольно примитивно: одно умножение и одно вычитание (с поправкой на то, что действия осуществляются с векторами). Однако, с чего-то нужно начать. Проверяем этот код, для удобства автоматически присваивая переменной myDrag (из скрипта второй сферы) значение параметра drag первой сферы.

drag=1

drag=3

drag=15

drag=50

Собственно, здесь оба шарика так и не начали движение. Мне просто надоело ждать.

Итак, результат получился для меня неожиданный. Примитивный алгоритм, который задумывался как начальная точка, от которой бы я дальше отталкивался — оказался конечной точкой. Похоже, именно так и считается замедление в Unity с использованием параметра drag. С другой стороны — проще, значит быстрее (в плане времени выполнения).

Дальнейшие эксперименты расхождений между моим скриптом и встроенной физикой почти не показали. Почти. Оставалась одна мелочь. При значении drag=100 мой второй, движимый скриптом шарик, величественно поплыл вверх.

drag=100

В общем-то, этого следовало ожидать, исходя из алгоритма. Однако, в Unity подобного не наблюдается. Следовательно, нам осталась одна простейшая модификация кода:

Теперь, «отрицательное» движение исключено и мы имеем полноценную имитацию действия сил и торможения движка Unity.

Физический аналог непосредственно параметра drag подобрать проблематично. Можно лишь сказать, что он определяет нелинейное трение (или нелинейное сопротивление — кому как удобнее). При этом сам алгоритм прост и, вероятно, быстро выполняем. А потому, если от физической модели не требуется какой-то особой достоверности или большой предсказуемости — использование параметра drag не лишено смысла.

Источник

Unity скрипт контроль физики Rigidbody (Твердые тела)

Properties, свойства

Свойство: Функция:

Mass
Масса объекта (в килограммах по умолчанию).

Drag
Какое сопротивление воздуха влияет на объект при движении от силы. 0 означает отсутствие сопротивления воздуха, а бесконечность заставляет объект немедленно прекращать движение.

Angular Drag
Какое сопротивление воздуха влияет на объект при вращении от крутящего момента. 0 означает отсутствие сопротивления воздуха. Обратите внимание, что вы не можете заставить объект перестать вращаться, просто установив его Angular Drag в бесконечность.

Use Gravity
Если включено, на объект влияет гравитация.

Interpolate
Попробуйте один из вариантов, только если вы видите рывки в движении вашего Rigidbody.
— None Интерполяция не применяется.
— Interpolate Преобразование сглаживается на основе преобразования предыдущего кадра.
— Extrapolate Преобразование сглаживается на основе оцененного преобразования следующего кадра.

Collision Detection
Используется для предотвращения прохождения быстро движущихся объектов через другие объекты без обнаружения столкновений
.
— Discrete
Используйте дискретное обнаружение столкновений со всеми другими коллайдерами в сцене
. Другие коллайдеры будут использовать дискретное обнаружение столкновений при тестировании на столкновение с ним. Используется для нормальных столкновений (это значение по умолчанию).

— Continuous Dynamic
Используйте непрерывное обнаружение столкновений на основе развертки для объектов GameOject, для которых установлено постоянное и непрерывное динамическое столкновение. Он также будет использовать непрерывное обнаружение столкновений со статическими коллайдерами (без твердого тела). Для всех других коллайдеров используется дискретное обнаружение столкновений. Используется для быстро движущихся объектов.

— Continuous Speculative
Использовать спекулятивное непрерывное обнаружение
обнаружения против твердых тел и коллайдеров. Это также единственный режим CCD, в котором вы можете устанавливать кинематические тела. Этот метод имеет тенденцию быть менее дорогим, чем непрерывное обнаружение столкновений на основе развертки.

— Freeze Position
Выборочно останавливает твердое тело, движущееся по осям X, Y и Z.

— Freeze Rotation
Выборочно останавливает твердое тело, вращающееся вокруг локальных осей X, Y и Z.

Источник

Learn how to Drag and Drop items in Angular

In this tutorial you’re going to learn how to install and use the new Drag & Drop Module in Angular.

The drag and drop module in Angular 7 allows you to drag elements around and a screen and drop them into other areas.

In this tutorial we’re going to create two lists and populate them with draggable items that can be moved around a list and dropped into another list.

You can get started by cloning the skeleton project which contains two basic lists and some styles to get you started.

Prerequisites

You must have the Angular CLI installed at version 7 at least. To verify this go into your terminal or command line and enter the command:

Head here for find out how to install the Angular CLI if you don’t have Angular or if you need to upgrade your installed CLI to the current version.

You also need an to create a new Angular project, you can either grab my skeleton project or go here to find out how to generate a new project using the terminal.

Resources

Step 1

In your terminal or command line install the CDK, Material & Animations with the following command:

npm i — save @angular/cdk @angular/material @angular/animations

Then, in the app.module.ts file import the DragDropModule

Step 2

Create two arrays of data in your app.component.ts file. One array will be future technologies you want to learn, the other will be technologies you’ve already learned, for example I’ve called mine todos and completed:

Step 3

In your app.component.html file create two lists to display this data, checkout my skeleton project for the basic template if you’re unsure.

Within these lists you need a way of displaying the data, I have used material cards but they could just as easily be lists or shapes:

Step 4

First of all we want to make our lists droppable, that is to allow us to drop items between lists.

Start by adding cdkDropList to your todo lists HTML tag (the tags with the list class).

Step 5

Step 6

Now you need to bind the array of todo items we created in step 2 to this list and we can do this by binding it to the cdkDropListData as follows:

Step 7

Step 8

Finally we need to bind cdkDropListDropped to a method which is going to handle the logic that moves the ordering of the array and transfers items between arrays. We’ll create this method later but for now we know we want to call it onDrop() and that we want to pass in an event:

Step 9

Lastly for our to do list we need to go deeper into the list and add cdkDrag to the HTML element that is going to be draggable. In my skeleton project, this is a material card but it could just as easily be a list or a shape:

You’re todo list should now look as follows:

Step 9

You doneList should now look as follows:

Step 10

We now need to create the onDrop() method to handle the logic of reordering our list or transferring items between lists.

Step 11

Create the onDrop() method which is going to take an event which is of type CdkDragDrop which is an array of strings containing information about the containers and indexes.

Your onDrop method should now look like:

Step 12

Now we need to handle events where we are simple dragging an item within one list and reordering them, for this the DragDropModule provides the moveItemInArray method which we imported in step 10.

We’ll first create an if statement to check that the action the user is perform is reordering an item within an array. We can achieve this by getting the containers data, the current index and previous index and passing them into the moveItemInArray method which will then perform its wizardry to reorder your list. Your if statement should look like:

Go into your application and check that you can now reorder items within their respective lists.

Step 13

Your else statement should now look like this within your completed onDrag() method:

Fire up your application and you should now be able to drag and drop items between lists as well as reordering items between lists.

If you want to master the basics of Angular I have created a kick ass course called Angular Essentials available only on codeToBe.

Источник

Как реализовать функцию перетаскивания с помощью Angular 9

Дата публикации: 2020-05-26

От автора: Component Development Kit представляет собой набор инструментов, реализующих общие модели поведения и компоненты с очень уникальным стилем взаимодействия. Это своего рода абстракция библиотеки Angular Material Library без стилевой специфичности только для material design. Это предоставляет больше уникальных способов проявить творческий подход при создании компонентов Angular.

Инструмент Drag and Drop

Инструмент «Drag and Drop» является одним из наиболее распространенных способов разработки компонентов. Он содержит директивы, которые обеспечивают действительно высокое качество функции перетаскивания для компонентов.

Модуль @angular/cdk/drag-drop предоставляет вам возможность легко и декларативно создавать drag-and-drop интерфейсы с поддержкой свободного перетаскивания, сортировки в списке, переноса элементов между списками, анимации, сенсорных устройств, пользовательских рычагов перетаскивания, предварительного просмотра и заполнителей — в дополнение к горизонтальным спискам и блокировке по оси.

Что необходимо

Последняя версия Angular (используйте версию 9). Запускаем в терминале команду для проверки версии Angular.

Бесплатный курс «Laravel + Angular. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel

Источник

Drag and Drop in Angular

I’m Jeffry Houser, a developer in the content engineering group at Disney Streaming Services. My team builds content portals that allow editors to create magic for our customers in the video services we power.

This article will teach you to implement drag and drop in an Angular application. Having worked on web applications for so long, drag and drop scares me. As a user interface mechanism, it is not easily discoverable, and I worry about it confusing users. In the early days, browser support was inconsistent at best and adding such advanced UI touches was more pain than it was worth. These days, things have changed! Frameworks encapsulate away a lot of browser incompatibility issues. When we needed to support the reordering of a list of items, implementing drag and drop was a great approach.

I’m going to show you how we used the Dragula library to implement Drag and Drop in our application.

Setup Your Angular Project

To follow these instructions, you’ll need to create an empty Angular project. If you don’t have it, I’d start by installing the Angular CLI using these instructions. The next step is to create the project with this command:

You’ll see something like this:

I created this project using Angular 7. It is named `DragAndDrop03`, the 03 being part of my internal naming structure, and you can name your project whatever you like. I also enabled routing and used CSS for this sample. We probably won’t need routing, but I add it as a force of habit.

Now install Dragula, the drag and drop library:

Open up the polyfill.ts file from the src directory of your project and add this code at the bottom:

This is required for the current version of Dragula to work. We’ll want to be sure to include the Dragula styles. Open up the angular.json file. Find the styles section, like this:

Add the styles from the Dragula library:

Be sure to load the DragulaModule into the app.module.ts. First, import the library:

And then load it as part of the imports section of the NgModule metadata:

Now we’re are ready to add some drag and drop to our app.

Set up Drag and Drop

The first step is to create a data source of items we want to be able to drag and drop. Open up the app.component.ts file. I created an array of character objects, representing made up characters, and of course me:

For my test purposes, I added a total of 27 characters. Open up the app.component.html and delete all the contents inside it.

I’m going to add a div to wrap all items here:

Inside of app.component.css, put some CSS for this div:

This just expands the wrapper to the full height and width of the page, while also aligning all it’s children to the center of the screen.

How create an embedded container — this will be our Dragula container:

Create some CSS for this div:

The height is `100%` to expand the full height of the screen; the width is `200px` so that it will be centered. If we expanded it to `100%` width it would look left aligned. The CSS display is `inline-block` so that each character will be on their own separate line.

Finally, create the characters by looping inside the Dragula container:

This creates a div with the character details on it. Add some CSS to make things look nice:

Primarily all this CSS design is for elegance of the demo and is unrelated to drag and drop specifics. Run your app, and you should see something like this:

Now we need to tell Dragula about this container so it can allow for drag and drop. In the HTML template, find the dragula_container div:

We added two items to this. The first is the dragula property. This property’s value is how we separate different Dragula groups, in case we have multiple sections of the screen that allow for drag and drop.

Now switch back to the app.component.ts. Inject the DragulaService:

You’ll need to import this too:

Then, create the drag and drop group:

Be sure to import the OnInit interface:

And be sure that your AppComponent class implements it:

That is all you need to do to implement drag and drop with Dragula in an Angular app. Rerun your code and test it out:

Set up Auto Scrolling

If you play around with the demo for any length of time, you’ll notice that the list of items does not automatically scroll when you drag to the edge of the screen. We are going to solve that by plugging in a library, named dom-autoscroller. First install it:

You’ll see something like this:

We’re going to want to make a few changes to the styles. First open up the styles.css in the src directory:

This will prevent the HTML page from extending off the page. For scrolling to work it needs to know where its limits are.

Open up the app.component.html file and find the first few lines:

The structure here is important. The wrapper layer is the scrollable layer. The dragula_container div sets up the Dragula library. The third embedded div is the loop that defines all the individual scrollable elements. We’re going to need to access the scrollable div as a ViewChild, so add the #autoscroll to it:

And within the app.component.ts class, add this code:

The ViewChild metadata gives us a programmatical hook into the HTML div.

We’re going to make one style tweak to the wrapper CSS inside the app.component.css:

I added the overflow-y property and set it to `scroll` so that it would always be scrollable. You’ll probably have acceptable results if you set it to `auto`.

Go back to the app.component.ts file to import the scroller:

Now go to the ngOnInit() method to set up scrolling:

The dom-autoscroll library is not built as a native Angular library, so it feels a bit weird the way we use it. But, after the import we call a function, pass in an array of the element we want it to watch. In this case, just our autoscroll ViewChild’s nativeElement. The second argument is a parameter object. I included a few common parameters. The maxSpeed is the speed which it moves. ScrollWhenOutside will scroll when you are dragging an item outside of the container. The margin is how close to the edge of the container you want to be when scrolling starts. The autoScroll() function tells us to only autoScroll when the mouse button is held down.

Rerun your code, and you should see an image like this:

I wish the drag and scrolling was native to the library, but thankfully the dom-autoscroller is easy to plugin and setup.

Dragula API Overview

Now that I’ve shown you a simple sample of dragging and dropping, I want to review the full API. Dragula includes a full featured API that allows you to tweak how drag and drop works for your application. First let’s look at some options in the configuration object:

There are a bunch of events supported by Dragula that allow you to run code throughout the drag and drop life cycle. The bulk of these events include HTML elements as their arguments, as opposed to Angular variables, unless otherwise stated:

As you can see the API is fully featured.

I have used drop and dropModel listeners to perform data source object conversions when the objects in the source are different than the object in the destination. I’ve used remove and removeModel to update some data in lists not used for display, but that do care about the underlying data.

Drag and Drop between Containers

Now expand the previous sample to have two containers, and I’ll show you how to drag and drop between them. First, we’ll modify the TypeScript code, then the HTML and CSS.

Open up app.component.ts. Change the ViewChild references from this:

We’ll have two containers that support drag and drop, so I added both ViewChildren and named them autoscroll1 and autoscroll2.

We have a characters data source, but now add a selectedCharacters array:

This is an empty array for now. The characters array provides all the characters that can be dragged. The selectedCharacters array will contain all the characters that are dropped into the second container.

Look at the ngOnInit() method. The setup of the dragulaService does not change, but the autoScroll will change. Look at this:

The first argument is an array of elements that the autoScroll library will look at. We want to rename the component from autoscroll to autoscroll1 and add autoscroll2. This should do it:

You can keep the scroll options the same.

I’m going to build the HTML from scratch for you, but you’ll notice a lot of similarities with our previous sample. Start with a page wrapper:

This is the overall wrapper for our elements, and notice it is no longer an autoscroll container ViewChild. CSS for the wrapper is just a height and width of `100%`.

This child is going to need two children, each split between `50%`. This is the first:

The autoscroll1 container ViewChild has two styles associated with it. The first is a scrollable-wrapper:

This is what we used for the scrollable container in the previous section, except the width is `50%` instead of `100%`. It also has a float-left CSS class:

This div will be on the left side of the screen, leaving the right side of the screen for our other container.

The next embedded div is the dragula_container. This is where we’re using our previous sample verbatim:

This just makes sure each character is `200px` wide and the `inline-block` display will stack each character on top of each other, instead of side by side. Finally, add the character CSS block:

This puts each character in a box, just like the previous sample.

We’ve looked at the source container, but don’t forget about the destination container:

The main differences between the first and second containers is that here, the autoscroll div layer does not have the float-left CSS, meaning it will appear to the right of the first div. The dragulaModel is pointed at selectedCharacters instead of characters. And finally, the character loop is also over selectedCharacters instead of characters.

Run your code, and you should see something like this:

Click and drag from the left container to the right a few times. Then go back:

Drag and Copy between Containers

I want to go through one more sample in this article. This section will show you how we can drag from a source container and copy the item into a destination, while also leaving the source container unchanged. I’m going to build off the previous sample to create this one.

First thing we want to do is add IDs to the HTML. Open the app.component.html and find the source container:

Then do the destination:

That is easy enough, now move back to the app.component.ts file. Find the ngOnInit(). We’re going to options to the option array when creating the Dragula group. This is the code:

The second argument is an empty object, but as we discussed earlier, we can add a lot of options into this object. First, add an accepts function:

This says that we only accept the drop if the target.id is something different than `source`. Since this Dragula group is only looking at two containers, it means drop will only work on the destination. Next add a copy function:

This allows the item to be copied only if the item comes from the source. Both accepts and copy are about performing DOM manipulation as part of the HTML display. But, since we’re dealing with Angular we also have an array behind the scenes, and we’re going to use copyItem to make sure that the underlying data provider array is updated properly:

For the purposes of this sample, the copyItem just returns the item. We could create a more complex copyItem function, such as if we had a nested object structure and did not want to share the copy.

Rerun the app, and give it a shot:

You should be able to copy items from the source to the destination. Notice the item is not removed from the source. You will not be able to copy items from the destination to the source. You should be able to rearrange items in the destination, but will not be able to rearrange items inside the source.

Final Thoughts

Since we first researched drag and drop libraries, the Angular Material library introduced Drag and Drop functionality. While this is a compelling offering, we decided not to change course in mid-flight. We explored other options, including using native HTML5 features, but decided that Dragula offered a better experience over other solutions.

Источник