【Unity】なぞった部分に線を描くサンプル解説

線を描くためにはなぞったあとを Mesh で作成すれば実線になる

今回ではこのような Mesh で線を描画している

なぞった位置を取得する

今回は Input を使わず uGUI の タップ判定から 座標を変換している

OnDrag が呼ばれるたびに線を描画していると、無駄が多いので

前回のタップ位置と今回のタップ位置の magnitude を計算して

一定以上の距離であればメッシュを作成している

public void OnDrag(PointerEventData eventData)
{
    var pos = eventData.position;

    // 一定距離ドラッグしたら描画する
    if ((_prevPos - pos).magnitude < 2f)
        return;

    CreateMesh(_prevPos, pos, _isNew);
    _prevPos = eventData.position;
    _isNew = false;
}

メッシュの作成

EventData の position はスクリーン座標なのでこれをローカル座標に変換する

RectTransformUtility.ScreenPointToLocalPointInRectangle(_rect, prev, _targetCamera, out var w_prev);
RectTransformUtility.ScreenPointToLocalPointInRectangle(_rect, end, _targetCamera, out var w_end);

点1から点2までの垂直はベクトルを取得して厚みの計算をできるようにする

// 点1から点2までのベクトルを取得し90度回転させ垂直なベクトルを取得
var normal = (Vector2)(Quaternion.Euler( 0, 0, 90) * (w_prev - w_end).normalized);
// これに幅 の半分をかけることで上と下の位置が取得できる
var v = normal * _width / 2 * transform.lossyScale;

まだメッシュが無い場合は4頂点を求めて メッシュを作成する

// 点1の上下位置
var prev1 = w_prev + v;
var prev2 = w_prev - v;

// 点2の上下位置
var new1 = w_end + v;
var new2 = w_end - v;

すでにメッシュがある場合は前回の最後の2点をそのまま利用するため、2点のみ追加する

// 点3の上下位置
var new1 = w_end + v;
var new2 = w_end - v;

これを繰り返していくと最初の画像のように線ができる