MyLittleCanvas

🎨 Нужен собственный компонент?

Используйте MyLittleCanvas вместо Canvas!

Использование

dependencies{
   implementation 'io.openharmony.tpc.thirdlib:MyLittleCanvas:1.0.2'
}

Примеры

Доступные фигуры

TODO : НЕОБХОДИМО ЗАПОЛНИТЬ ЭТИ ДОКУМЕНТЫ

Анимация

Следуйте примеру SwitchView

Анимации фигур выполняются экземпляром ShapeAnimator, прикреплённым к вашему компоненту

private final ShapeAnimator shapeAnimator = new ShapeAnimator(this);

Все анимированные методы фигур заключены в метод .animate()

Например, для CircleShape вы можете анимировать его положение (centerX), используя

myCircleShape.animate().centerXTo(15);

Затем используйте свой ShapeAnimator для выполнения этой анимации

shapeAnimator.play(myCircleShape.animate().centerXTo(15))
    .setDuration(500)
    .start()

.top(значения)

Этот метод изменит значения top фигуры, игнорируя её предыдущую высоту

Например, для прямоугольника [left: 0, top:50, right: 200, bottom:90]

если вы используете .animate().top(50, 0)

Окончательные значения прямоугольника будут [left: 0, top:50, right: 200, bottom:90], это не изменит нижнюю часть прямоугольника

.topTo(значения)

Это то же самое, что и top, за исключением того, что он автоматически устанавливает первое значение как текущее значение

Например, для прямоугольника [left: 0, top:50, right: 200, bottom:90]

Если вы используете .animate().topTo(0), он будет анимировать верх от 50 до 0

.moveTopTo(значения)

Этот метод изменит значение top фигуры, сохраняя высоту фигуры

Например, для прямоугольника [left: 0, top:10, right: 200, bottom:90], высота равна 80

если вы используете .animate().moveTop(0)

Окончательными значениями прямоугольника будут [left: 0, top:0, right: 200, bottom:80], он также изменит нижнюю часть прямоугольника, чтобы сохранить высоту 80

.topBy(значения)

Этот метод изменит значение top фигуры, игнорируя его предыдущую высоту

Умножая его верх на значения

Например, для прямоугольника [left: 0, top:10, right: 200, bottom:90]

если вы используете .animate().topBy(0, 0.5, 1f)

Значения прямоугольника будут

[left: 0, top:0, right: 200, bottom:90] затем

[left: 0, top:5, right: 200, bottom:90] затем

[left: 0, top:10, right: 200, bottom:90]

это не изменит нижнюю часть прямоугольника

.topPlus(значения)

Этот метод изменит значение top фигуры, игнорируя его предыдущую высоту

Добавляя его верх к значениям

Например, для прямоугольника [left: 0, top:10, right: 200, bottom:90]

если вы используете .animate().topPlus(0, 10, 0)

Значения прямоугольника будут

[left: 0, top:10, right: 200, bottom:90] затем

[left: 0, top:20, right: 200, bottom:100] затем

[left: 0, top:10, right: 200, bottom:90]

Обработка событий

Следуйте примеру Tree View

Обработка пользовательских событий, таких как onClick или onTouch, выполняется экземпляром ShapeEventManager, присоединённым к вашему Компонент

private final ShapeEventManager shapeAnimator = new ShapeEventManager(this);

Слушаем событие клика

Вы можете прослушать клик по фигуре, используя shapeEventManager.ifClicked(shape, listener)

shapeEventManager.ifClicked(myShape, clickedShape -> {
    //your action
    myShape.setColor(Color.BLACK);
});

Слушаем касание

Чтобы проще обрабатывать onTouchEvent, используйте shapeEventManager.ifClicked(shape, touchSetup).

TouchSetup предоставляет вам элемент EventHelper, который помогает связать действие с взаимодействием пользователя.

Пользовательские действия

Используйте eventHelper.onDown((event) -> {/* code */}), чтобы выполнить пользовательское действие при нажатии пальцем пользователя.

Используйте eventHelper.onMove((event) -> {/* code }) для выполнения пользовательского действия при перемещении пальца пользователя.

Используйте eventHelper.onUp((event) —> {/* code */) для выполнения пользовательского действия, когда пользователь поднимает палец.

Привязанные действия

EventHelper может автоматически связывать действие фигуры с взаимодействием пользователя. Например, вы можете переместить центр X фигуры в event.x, используя:

.move(myRectShape, RectShape.Pos.CENTER_X, EventPos.X)

Пожалуйста, ознакомьтесь с реализованными RectShape.Pos и CircleShape.Pos.

Лицензия

Copyright 2018 florent37, Inc.

Licensed under the Apache License, Version 2.0 (the «License»); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an «AS IS» BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.