https://github.com/lvming6816077/like-heart

Canvas直播间点赞送心组件
https://github.com/lvming6816077/like-heart

Last synced: 1 day ago
JSON representation

Canvas直播间点赞送心组件

• Host: GitHub
• URL: https://github.com/lvming6816077/like-heart
• Owner: lvming6816077
• Created: 2018-05-24T09:59:12.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-07-22T16:22:01.000Z (over 4 years ago)
• Last Synced: 2024-09-26T00:31:05.304Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 17.6 KB
• Stars: 37
• Watchers: 3
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-github-star - like-heart

README

        


## Canvas点赞送心组件

## 特性

* 配置项多，定制化强

* 基于canvas效果，性能更强

* 使用简单方便

## 示例

![](http://www.nihaoshijie.com.cn/mypro/demopage/1527477112_60_w305_h232.gif)

## 使用方法

```

    let img = new Image();

    img.src = './img/like0'+Math.ceil(Math.random()*3)+'.png';

    let p1 = {

        x: 100 + getRandomDis(),

        y: 300 + getRandomDis()

    };

    let p2 = {

        x: 100 + getRandomDis(),

        y: 200 + getRandomDis()

    };

    new LikeHeart({

        id: heartCount,

        x: 200,

        y: 200,

        endX: 200,

        endY: 200,

        onFadeOut: removeItem,

        width: 66,

        height: 66,

        image: img,

        bezierPoint: {

            p0: {

                x: 200,

                y: 200

            },

            p1: p1,

            p2: p2,

            p3: {

                x: 200,

                y: 200

            }

        }

    });

```

## 配置说明

| 参数     | 类型     | 描述 | 必需 | 默认值 |

| :------------- | :------------- | :------------- | :------------- | :------------- |

| object.x         | number      | 心起点位置x | 是 |  |

| object.y         | number      | 心起点位置y | 是 |  |

| object.endX         | number      | 心结束位置x | 是 | |

| object.endY         | number      | 心结束位置x | 是 |  |

| object.height         | number      | 高 | 是 |  |

| object.width         | number      | 宽 | 是 |  |

| object.angelEnd         | number      | 左右摇摆起始角度 | 否 | -20 |

| object.angelBegin         | number      | 左右摇摆结束角度 | 否 | 20 |

| object.noScale         | bool   | 是否使用缩放心动画 | 否 |  |

| object.scaleDis         | number      | 缩放心临界值(默认从起始位置到升高50) | 否 | 50 |

| object.noFadeOut         | bool      | 是否使用fadeOut | 否 |  |

| object.opacityDis         | number      | 缩放心临界值(默认从起始位置到升高50) | 否 | 50 |

| object.speed         | number      | 上升速度 | 否 | 0.023 |

| object.bezierPoint         | number      | 贝塞尔曲线4个点的值 | 是 |  |

| object.onFadeOut         | function      | 每个心fadeOut之后回调 | 否 |  |

| object.image         | obj      | 图片对象 | 是 |  |

## License

Licensed under MIT license.