网站公告 | 泰斗网校全新上线了,可以和论坛用户登录同步,如果遇到登录问题联系管理员解决
查看: 15583|回复: 16
收起左侧

[AdvancePikachu] Unity 滚轮实现UGUI ScrollView的缩放

[复制链接]

[AdvancePikachu] Unity 滚轮实现UGUI ScrollView的缩放[复制链接]

AdvancePikachu 发表于 2017-11-28 16:51:21 [显示全部楼层] 回帖奖励 |倒序浏览 |阅读模式 回复:  16 浏览:  15583

前段时间在做一个类似AnimationCurve的可视化编辑器,其中在做内部缩放的时候略有所感,把利用滚轮+焦点的缩放分享一下。



其中一个脚本处理内部逻辑

[C#] 纯文本查看 复制代码
public class ResizeScrollEvent : UnityEvent<float> { }
 
public class UIScroll : MonoBehaviour, IScrollHandler
{
    public float minFactor = 1;
    public float maxFactor = 3;
    public bool wholeSizeFactor = true;
 
    private ResizeScrollEvent _onResize = new ResizeScrollEvent();
    private float _sizeFactor = 1f;
 
    public ResizeScrollEvent OnResize { get { return _onResize; } }
    public float SizeFactor
    {
        get
        {
            if (wholeSizeFactor)
                return Mathf.Round(_sizeFactor);
            return _sizeFactor;
        }
        set
        {
            SetFactor(value);
        }
    }
 
    [SerializeField]
    RectTransform content;
    [SerializeField]
    RectTransform viewport;
 
    Rect _rect;
    Vector2 _focusPos;
 
    void Start()
    {
        _rect = GetWorldRect(viewport);
        _focusPos = _rect.center;
    }
 
    public static Rect GetWorldRect(RectTransform rt)
    {
        Vector3[] cors_ = new Vector3[4];
        rt.GetWorldCorners(cors_);
        Vector2 center = cors_[0];
        float width = Mathf.Abs(cors_[0].x - cors_[2].x);
        float height = Mathf.Abs(cors_[0].y - cors_[2].y);
        Rect rect_ = new Rect(center.x, center.y, width, height);
        return rect_;
    }
 
    private void SetFactor(float value)
    {
        value = ClampFactorValue(value);
 
        if (value != _sizeFactor)
        {
            _sizeFactor = value;
            ChangeSizeFactor(_sizeFactor);
            _onResize.Invoke(_sizeFactor);
        }
    }
 
    private void ChangeSizeFactor(float v)
    {             Vector2 viewportSize_ = _rect.size;
 
        //[color=#0820][backcolor=rgb(244, 244, 244)][font=Consolas, &quot][size=12px]缩放过程中的焦点位置(此处为中心位置)[/size][/font][/backcolor][/color]
        //_focusPos = _rect.center;
 
        Rect contentRect_ = GetWorldRect(content);
        Vector2 contentSize_ = contentRect_.size;
        Vector2 contentCenter_ = contentRect_.center;
 
        Vector2 contentCenter2ViewportCenter_ = _focusPos - contentCenter_;
        float centerPosPercentX_ = contentCenter2ViewportCenter_.x / contentSize_.x;
        float centerPosPercentY_ = contentCenter2ViewportCenter_.y / contentSize_.y;
 
        Vector2 scorllSize_ = viewportSize_ + (v - 1) * viewportSize_ / 5;
        content.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, scorllSize_.x);
        content.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, scorllSize_.y);
 
        Vector2 sizeDelta_ = scorllSize_ - contentSize_;
        Vector2 posOffset_ = new Vector2(sizeDelta_.x * -centerPosPercentX_, sizeDelta_.y * -centerPosPercentY_);
        content.anchoredPosition += posOffset_;
 
        Vector3[] viewCorner_ = new Vector3[4];
        Vector3[] contentCorner_ = new Vector3[4];
        viewport.GetWorldCorners(viewCorner_);
        content.GetWorldCorners(contentCorner_);
 
        float xFixDelta_ = 0;
        float yFixDelta_ = 0;
 
        if (viewCorner_[0].x < contentCorner_[0].x) xFixDelta_ = viewCorner_[0].x - contentCorner_[0].x;
        if (viewCorner_[0].y < contentCorner_[0].y) yFixDelta_ = viewCorner_[0].y - contentCorner_[0].y;
        if (viewCorner_[2].x > contentCorner_[2].x) xFixDelta_ = viewCorner_[2].x - contentCorner_[2].x;
        if (viewCorner_[2].y > contentCorner_[2].y) yFixDelta_ = viewCorner_[2].y - contentCorner_[2].y;
 
        content.anchoredPosition += new Vector2(xFixDelta_, yFixDelta_);
    }
 
    private float ClampFactorValue(float value)
    {
        float factor_ = Mathf.Clamp(value, minFactor, maxFactor);
 
        if (wholeSizeFactor) factor_ = Mathf.Round(factor_);
 
        return factor_;
    }
 
    public void OnScroll(PointerEventData eventData)
    {
        if (!isActiveAndEnabled) return;
      _focusPos = eventData.position;//焦点为鼠标所在位置
        float delta_ = 0;
        if (Mathf.Abs(eventData.scrollDelta.x) > Mathf.Abs(eventData.scrollDelta.y))
            delta_ = eventData.scrollDelta.x;
        else delta_ = eventData.scrollDelta.y;
 
        SetFactor(_sizeFactor + delta_);
    }
}

  另一个脚本做触发

[C#] 纯文本查看 复制代码
public class NewBehaviourScript : MonoBehaviour
{
    [SerializeField]
    Slider scaleSlider;
    [SerializeField]
    Text sliderValue;
    [SerializeField]
    UIScroll scrollView;
 
    void Start ()
    {
        scaleSlider.wholeNumbers = true;
        scaleSlider.minValue = 1;
        scaleSlider.maxValue = 10;
        scaleSlider.onValueChanged.AddListener(OnSliderValueChange);
 
        scrollView.minFactor = scaleSlider.minValue;
        scrollView.maxFactor = scaleSlider.maxValue;
        scrollView.wholeSizeFactor = true;
        scrollView.OnResize.AddListener(OnScrollResized);
        scrollView.SizeFactor = 1;
    }
 
    private void OnScrollResized(float value)
    {
        scaleSlider.value = value;
    }
 
    private void OnSliderValueChange(float value)
    {
        scrollView.SizeFactor = value;
        sliderValue.text = value.ToString();
    }
}




PS:刚开始以为是版本问题,后来发现是我的Cavans设置有问题,修改后问题解决!



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
+1
15591°C
16
  • anmie7723
  • Liangzz
  • jacob
  • 杯多纷
  • 甲壳虫
过: 他们
因分享而快乐,学习以自强!
anmie7723 发表于 2017-11-29 08:21:35 显示全部楼层
路过看看,感谢分享
因分享而快乐,学习以自强!
Liangzz 发表于 2017-11-29 20:51:55 显示全部楼层
收了后面慢慢看
因分享而快乐,学习以自强!
jacob 发表于 2017-11-30 09:22:14 显示全部楼层
谢谢666学习
因分享而快乐,学习以自强!
杯多纷 发表于 2017-11-30 11:27:22 显示全部楼层
这干货可以有
因分享而快乐,学习以自强!
甲壳虫 发表于 2017-11-30 13:32:29 显示全部楼层
很有帮助thx
因分享而快乐,学习以自强!
anmie7723 发表于 2017-11-30 13:49:41 显示全部楼层
路过看看,赞一个
因分享而快乐,学习以自强!
星陨尘心_clw 发表于 2017-11-30 13:55:03 显示全部楼层
路过看看,赞一个
因分享而快乐,学习以自强!
longines26 发表于 2017-12-1 19:06:25 显示全部楼层
路过看看,赞一个
因分享而快乐,学习以自强!
libufan 发表于 2017-12-2 17:01:33 显示全部楼层
我来加个温支持一下
因分享而快乐,学习以自强!
feelbug 发表于 2017-12-3 14:56:40 显示全部楼层
我是来收集的
因分享而快乐,学习以自强!
拐角 发表于 2017-12-5 19:39:33 显示全部楼层
因分享而快乐,学习以自强!
因分享而快乐,学习以自强!
anmie7723 发表于 2017-12-6 08:23:10 显示全部楼层
路过看看 感谢分享
因分享而快乐,学习以自强!
ww99yun56 发表于 2017-12-6 14:49:33 显示全部楼层
支持~感谢楼主
因分享而快乐,学习以自强!
kuanyidairen 发表于 2018-2-13 20:04:44 显示全部楼层
有源码没有?? 学习一下!!!
因分享而快乐,学习以自强!
12下一页
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

VR/AR版块|Unity3d|Unreal4|新手报道|小黑屋|站点地图|沪ICP备14023207号-9|【泰斗社区】-专注互联网游戏和应用的开发者平台 ( 浙ICP 备 13006852号-15 )|网站地图

© 2001-2013 Comsenz Inc.  Powered by Discuz! X3.4

1
QQ