canvas线性渐变获取度数：根据渐变线型坐标x1,x2,y1,y2计算角度

차분한 효도르

于 2021-12-23 09:20:11 发布

阅读量427

点赞数 1

文章标签：几何学 css3 动画 fabric vue

本文链接：https://blog.youkuaiyun.com/chlfla1012/article/details/122099444

版权

博客详细介绍了如何根据canvas线性渐变的起始点(x1, y1)和结束点(x2, y2)来计算渐变的角度，内容涉及几何学原理和CSS3动画应用，特别适用于使用Fabric.js或Vue进行图形渲染的场景。" 127940734,16533955,C++实现三国杀游戏,"['C++', '游戏开发', '算法']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
     * 根据 object 的 fill.coords 来计算 angle 分四个象限
     * @param fabricObject
     * @returns {number}
     */
    static getLinearGradientAngle(fabricObject) {
        fabricObject = _.cloneDeep(fabricObject)
        let angle = 0
        if (fabricObject.fill.colorStops) {
            //元素中心点坐标
            let cPos = {
                x: fabricObject.width / 2,
                y: fabricObject.height / 2
            }
            //渐变坐标
            let gPos = {
                x1: fabricObject.fill.coords.x1,
                x2: fabricObject.fill.coords.x2,
                y1: fabricObject.fill.coords.y1,
                y2: fabricObject.fill.coords.y2
            }

            if (this.isFirstQuadrant(gPos, cPos)) {//第一象限
                angle = Math.atan((gPos.x1 - cPos.x) / (cPos.y + (-gPos.y1))) / (Math.PI / 180)
            } else if (this.isSecondQuadrant(gPos, cPos)) {//第二象限
                angle = Math