bx = 3 * (p2.x - p1.x) - cx,
ax = p3.x - p0.x - cx - bx,
cy = 3 * (p1.y - p0.y),
by = 3 * (p2.y - p1.y) - cy,
ay = p3.y - p0.y - cy - by,
xt = ax * (t * t * t) + bx * (t * t) + cx * t + p0.x,
yt = ay * (t * t * t) + by * (t * t) + cy * t + p0.y;
heart.bezierDis += heart.speed;
return {
xt: xt,
yt: yt
}
}
return LikeHeart;
});
```第二步```：引入需要用到的页面
import LikeHeart from "../../../static/js/index";
```第三步```：直接复制下面这一段
<script>
import LikeHeart from "../../../static/js/index";
export default {
props: ["ClassTimePlayer", "videoUrl"],
data() {
return {
width: 175, //初始宽度
height: 400, //初始高度
heartList: [], //初始数组
heartCount: 0 //累加计数初始值
};
},
methods: {
getRandomDis() {
if (Math.random() > 0.5) {
return -(Math.random() * 43);
} else {
return +(Math.random() * 43);
}
},
createHeart() {
this.heartCount++;
let positionArray = [
{
x: 100,
y: 400,
endX: 100,
endY: 100
}
];
let img = new Image();
// img.src = "../../static/img/" + Math.ceil(Math.random() * 2) + ".png";
img.src = `../../static/img/${Math.ceil(Math.random() * 5)}.png`;
let p1 = {
x: 100 + this.getRandomDis(),
y: 300 + this.getRandomDis()
};
let p2 = {
x: 100 + this.getRandomDis(),
y: 200 + this.getRandomDis()
};
return new LikeHeart({
id: this.heartCount,
x: positionArray[0].x,
y: positionArray[0].y,
endX: positionArray[0].endX,
endY: positionArray[0].endY,
onFadeOut: this.removeItem,
noAngel: true,//决定是否从小到大
// noScale: true,//决定是否左右摆动
width: 30, //决定心的大小
height: 30,
image: img,
bezierPoint: {
p0: {
x: positionArray[0].x,
y: positionArray[0].y
},
p1: p1,
p2: p2,
p3: {
x: positionArray[0].endX,
y: positionArray[0].endY
}
}
});
},
removeItem(item) {
var array = [];
for (var i = 0; i < this.heartList.length; i++) {
if (this.heartList[i].id !== item.id) {
array.push(this.heartList[i]);
}
}
this.heartList = array;
},
},
mounted() {
// 飘心
var _this = this;
var ctx = document.getElementById("cvs").getContext("2d");
(ctx.canvas.width = _this.width),
(ctx.canvas.height = _this.height),
(function loop() {
ctx.clearRect(0, 0, _this.width, _this.height);
_this.heartList.forEach(function(item) {
