UNITY LineRendererで線を描く事はできるのですが,canvasの下のimageに描く事は出来ないでしょうか?

Question

前提・実現したいこと

LineRendererで線を描く事はできるのですが,canvasの下のimageに描く事は出来ないでしょうか?
LineRendererでは無理なのでしょうか?

該当のソースコード

lineRendererMultipleList.Last().Last().positionCount++;
positionIndex=lineRendererMultipleList.Last().Last().positionCount;
lineRendererMultipleList.Last().Last().SetPosition(positionIndex - 1, mousePosition);

Comments

[Bongo]

以前の「Unity canvasに描いた線を配列に保存してUndo,Redoしたい」（https://teratail.com/questions/232188 ）とのご質問を拝見しますに、すでにImage上のテクスチャを書き換えることによって線を引く方法は試されたご様子ですが、これとは違うということでしょうか（テクスチャ書き換えだと何らかの理由で行き詰まってしまい、LineRendererによる方法に変更した...とか）?

LineRendererの線がImageに隠れてしまって困るということでしたら、CanvasのRender ModeをScreen Space - Cameraにして、Plane Distanceを大きめにしてシーン空間内のオブジェクトよりも遠くにUI類が描画されるようにしてやる手が使えるかもしれません。
他にも、おととしの話になってしまいますが、別の方の「Unityで線を描画したい」（https://teratail.com/questions/109826 ）とのご質問の中で「UIオブジェクトとして線を作成する」というのを提案させていただいたことがあります。こういった方法だとご質問者さんの目的にはそぐわない感じでしょうか?

[29507-01]

おっしゃる通り,以前(https://teratail.com/questions/230866) で投稿させていただきimageに線を描く事は出来たのですが,線を太くするとかUndo,Redoの方法が分からなくRineRendererだと実現可能なのですが今度はImage上に描く方法が分からなくなってしまいました。
線を描く
public void DoUndo()
{
if (undoEnabled)
{
if (undoPixels.Count > 0)
{
System.Array.Copy(undoPixels[undoPixels.Count - 1 ], pixels, undoPixels[undoPixels.Count - 1 ].Length);
texture.LoadRawTextureData(undoPixels[undoPixels.Count - 1]);
if (debugMode) Debug.Log("(del)undoPixels.Count = " + (undoPixels.Count - 1));

texture.Apply();
undoPixels.RemoveAt(undoPixels.Count - 1);
}
}
}

セット方法は
undoPixels.Add(new byte[texWidth * texHeight * 4]); // TODO: need to reset size, if image size changes
System.Array.Copy(pixels, undoPixels[undoPixels.Count - 1], pixels.Length);

[29507-01]

if (Input.GetMouseButton(1))
{
undoEnabled = true;
DoUndo();
undoEnabled = false;
}
この処理を追加したのですが,Updateで何回もこの処理がLoopされ最初の線のみ残り消えました。
しかしボタンを一つ追加してみたのですが,消えません。

[29507-01]

内容がごちゃまぜになりました。
Space - Cameraにしたのですが,Planeを教えて頂けませんか?

[Bongo]

お返事が遅くなりました。「Render Camera」欄にシーン上のカメラをセットすると、その下に「Plane Distance」の項目が現れるかと思います。

念のため申し上げますと、LineRendererを使う方針で行くとなるとImageをシーン内に配置する意義はあまりないんじゃないかと思います。LineRendererは線の形をした3Dのオブジェクトを置いているようなものですから、単にLineRendererの背後にImageを置いただけではImage上の画像として線が描き込まれることはなく、Imageはただの背景として扱われるでしょう（本当にImage上の画像にLineRendererの描画結果を反映させることもできるだろうとは思いますが、SetPixelsによるテクスチャ書き込み方式と同等かそれ以上に説明がややこしくなりそうです...）。

[29507-01]

Imageの上に線が描画できればScreenShotでCanvasを切り抜き保存しようと考えていましたが上手くいかないようです。

Answer 1

確かにご質問者さんがなさっているように色を配列として保存しておくというのも一案だとは思いますが、もっと手軽にInstantiateでテクスチャ自体を複製してやるのはどうでしょうかね?
試しにPainterを下記のように改造してみました。すみませんが思考の整理のため変数名やら処理フローやらをいろいろといじってしまったので、オリジナルの「UI.Image にペイントする。線を手書きする。」のスクリプトとは様相が変わってしまいました。ですが「テクスチャのピクセルを1つずつ塗っていく」というアプローチはそのままです。

※結局LineRendererじゃなくてUndo・Redoに関する回答になってしまいすみません...
まだご質問の文面通りLineRendererに関する回答をお待ちでしたらいいのですが、もしUndo・Redoにテーマを変更するおつもりでしたら、お時間のある際にでもご質問のタイトルや文面に「当初はこういう内容だったが、こういう方針に変更した」みたいなことがわかるような修正を加えていただくと、他の閲覧者の方々にもわかりやすいかもしれません。

using System;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using UnityEngine.UI;

/// <summary>
///        お絵描き
/// </summary>
[RequireComponent(typeof(RectTransform), typeof(Image))]
public class Painter : MonoBehaviour
{
    // ペンの半径...0で1ピクセルの線になる
    [Range(0, 5)] public int penRadius;

    // 前景色
    public Color foregroundColor = Color.red;

    // 背景色
    [SerializeField] private Color backgroundColor = Color.white;

    private RectTransform rectTransform;
    private Image image;
    private Texture2D texture;
    private Vector2Int textureSize;
    private Vector2Int previousPixelPosition;
    private Vector2Int cachedPixelPosition;

    // Undo、Redo用のテクスチャ格納庫
    private readonly Stack<Texture2D> undoStack = new Stack<Texture2D>();
    private readonly Stack<Texture2D> redoStack = new Stack<Texture2D>();

    // Undo、Redo可能かどうかを外部スクリプトから調べたい場合、これらプロパティを参照する
    public bool CanUndo
    {
        get { return this.undoStack.Count > 0; }
    }

    public bool CanRedo
    {
        get { return this.redoStack.Count > 0; }
    }

    // Undo時にはundoStackからテクスチャを1つ取り出して現在のテクスチャとし、
    // 古いテクスチャはredoStackに積んでおく
    public void Undo()
    {
        if (!this.CanUndo)
        {
            return;
        }

        var previousTexture = this.texture;
        var poppedTexture = this.undoStack.Pop();
        this.texture = poppedTexture;
        this.redoStack.Push(previousTexture);
        this.UpdateSprite();
        Debug.LogFormat("Undo! UndoStack : {0} RedoStack : {1}", this.undoStack.Count, this.redoStack.Count);
    }

    // Redo時にはredoStackからテクスチャを1つ取り出して現在のテクスチャとし、
    // 古いテクスチャはundoStackに積んでおく
    public void Redo()
    {
        if (!this.CanRedo)
        {
            return;
        }

        var previousTexture = this.texture;
        var poppedTexture = this.redoStack.Pop();
        this.texture = poppedTexture;
        this.undoStack.Push(previousTexture);
        this.UpdateSprite();
        Debug.LogFormat("Redo! UndoStack : {0} RedoStack : {1}", this.undoStack.Count, this.redoStack.Count);
    }

    // テクスチャに何かしらの操作（線を引くなど）を行う前にはRecordを実行することにする
    // これによって変更前のテクスチャが複製されundoStackに積まれる
    // また、このタイミングでredoStackは空にする
    private void Record()
    {
        this.undoStack.Push(Instantiate(this.texture));
        foreach (var textureInRedoStack in this.redoStack)
        {
            Destroy(textureInRedoStack);
        }

        this.redoStack.Clear();
        Debug.LogFormat("Record! UndoStack : {0} RedoStack : {1}", this.undoStack.Count, this.redoStack.Count);
    }

    private void UpdateSprite()
    {
        var previousSprite = this.image.sprite;
        this.image.sprite = Sprite.Create(
            this.texture,
            new Rect(0, 0, this.texture.width, this.texture.height),
            Vector2.zero);
        Destroy(previousSprite);
    }

    private Vector2Int GetPixelPosition()
    {
        if (!RectTransformUtility.ScreenPointToLocalPointInRectangle(
            this.rectTransform,
            Input.mousePosition,
            null,
            out var pixelPositionFloat))
        {
            return this.cachedPixelPosition;
        }

        var sizeDelta = this.rectTransform.sizeDelta;
        pixelPositionFloat += sizeDelta * this.rectTransform.pivot;
        var pixelPosition = new Vector2Int(
            Mathf.Clamp((int)pixelPositionFloat.x, 0, this.textureSize.x - 1),
            Mathf.Clamp((int)pixelPositionFloat.y, 0, this.textureSize.y - 1));
        Debug.LogFormat("Pixel Position: {0}", pixelPosition);
        this.cachedPixelPosition = pixelPosition;
        return this.cachedPixelPosition;
    }

    // 入力座標がテクスチャ範囲内ならtrue、さもなければfalse
    private bool PositionIsWithinTexture(Vector2Int position)
    {
        return (position.x >= 0) && (position.y >= 0) &&
               (position.x < this.textureSize.x) && (position.y < this.textureSize.y);
    }

    // 入力座標に円を描く
    private void PaintAt(Vector2Int position, Color32 color, int radius)
    {
        var sqrRadius = radius * radius;
        for (var i = -radius; i <= radius; i++)
        {
            for (var j = -radius; j <= radius; j++)
            {
                var p = new Vector2Int(position.x + i, position.y + j);
                var dot = (i * i) + (j * j);
                if ((dot <= sqrRadius) && this.PositionIsWithinTexture(p))
                {
                    this.texture.SetPixel(p.x, p.y, color);
                }
            }
        }

        this.texture.Apply();
    }

    private void LineTo(Vector2Int from, Vector2Int to, Color32 color, int radius)
    {
        var penPosition = from;
        var x = (float)penPosition.x;
        var y = (float)penPosition.y;
        var fromTo = to - from;
        var fromToSign = new Vector2Int((int)Mathf.Sign(fromTo.x), (int)Mathf.Sign(fromTo.y));
        var fromToXIsZero = fromToSign.x == 0;
        var fromToYIsZero = fromToSign.y == 0;
        fromToSign.x = fromToXIsZero ? 1 : fromToSign.x;
        fromToSign.y = fromToYIsZero ? 1 : fromToSign.y;
        var absFromTo = fromToSign * fromTo;
        var dominantDirection = 0;
        var delta = Vector2.zero;
        if (absFromTo.x >= absFromTo.y)
        {
            var tangent = fromToXIsZero ? 0 : (float)fromTo.y / fromTo.x;
            delta.x = fromToSign.x;
            delta.y = tangent * delta.x;
        }
        else
        {
            var tangent = fromToYIsZero ? 0 : (float)fromTo.x / fromTo.y;
            delta.y = fromToSign.y;
            delta.x = tangent * delta.y;
            dominantDirection = 1;
        }

        while (this.PositionIsWithinTexture(penPosition))
        {
            try
            {
                this.PaintAt(penPosition, color, radius);
                x += delta.x;
                y += delta.y;
                penPosition.x = (int)x;
                penPosition.y = (int)y;
                if (fromToSign[dominantDirection] > 0)
                {
                    if (penPosition[dominantDirection] >= to[dominantDirection])
                    {
                        break;
                    }
                }
                else
                {
                    if (penPosition[dominantDirection] <= to[dominantDirection])
                    {
                        break;
                    }
                }
            }
            catch (Exception e)
            {
                Debug.LogException(e);
                break;
            }
        }
    }

    private void Start()
    {
        this.rectTransform = this.transform as RectTransform;
        this.image = this.GetComponent<Image>();
        var sizeDelta = this.rectTransform.sizeDelta;
        var width = (int)sizeDelta.x;
        var height = (int)sizeDelta.y;
        this.texture = new Texture2D(width, height, TextureFormat.ARGB32, false) {filterMode = FilterMode.Bilinear};
        this.texture.SetPixels32(Enumerable.Repeat<Color32>(this.backgroundColor, width * height).ToArray());
        this.texture.Apply();
        this.textureSize = new Vector2Int(width, height);
        this.UpdateSprite();
    }

    private void Update()
    {
        if (Input.GetKeyDown(KeyCode.U))
        {
            this.Undo();
        }

        if (Input.GetKeyDown(KeyCode.R))
        {
            this.Redo();
        }

        if (Input.GetMouseButtonDown(0))
        {
            this.Record();
            this.previousPixelPosition = this.GetPixelPosition();
        }
        else if (Input.GetMouseButton(0))
        {
            var currentPixelPosition = this.GetPixelPosition();
            this.LineTo(this.previousPixelPosition, currentPixelPosition, this.foregroundColor, this.penRadius);
            this.previousPixelPosition = currentPixelPosition;
        }
    }
}

Comments

[29507-01]

public bool CanUndo => this.undoStack.Count > 0;
public bool CanUndo => this.undoStack.Count > 0;
この個所でc#4では使えません。と表示されエラーは解除してテストしているのですがこのまま使いたい場合私の環境では何がまずいのでしょうか?
Visual Studio 2019を使っています。

[Bongo]

コードを旧バージョンでも使えると思われる記法に変更してみました。これならどうでしょうか?

[29507-01]

有難うございます。
上手くいきました。
すみませんがお願いついでにImageの外でも塗りたいのと線のサイズ変更の仕方を教えて頂けませんか?

線のサイズ変更は
[Range(0, 5)] public int penRadius; で出来ました。

out var pixelPositionFloat) - - - この個所でc#4では使えません。
と表示され　
Vector2 pixelPositionFloat;
out pixelPositionFloat)) と変更しましたが問題ないですよね。

[Bongo]

おっとすみません、「out var」の箇所もありましたね。おっしゃるとおりそのように書き換えてしまって大丈夫です。線のサイズ変更についてもお試しのとおりpenRadiusを増減させればいいでしょう。

Imageの外でも塗りたい（つまりImageは単なる背景画像という扱いで、Imageの存在は無関係に画面全体に描画したいという意味でいいでしょうか?）となると、これはImageのテクスチャに対するSetPixelによる書き換えでは対応できなそうですね...
そうなると今度はLineRendererによる線引きに方針を変更しないといけないかと思います。LineRendererによる方法はテクスチャ書き換えによる方法とはけっこう異なるアプローチでしょうから、現状のPainterのコードは捨てて作り直す必要があるでしょう。とはいえすでにこのご質問の投稿時点では、Undo機能はないかもしれませんがLineRendererによる太さ調整機能付きフリーハンド線引きはできているのですよね?となるとあとはUndo機能だけかと思います。今回の回答に提示しましたPainterでは過去のテクスチャを保存して以前の状態に戻れるようにしていますが、LineRendererを使った方法の場合は折れ線の頂点座標の配列を保存することになるでしょう。

[29507-01]

丁寧に有難うございました。
LineRendsrerはImageには線を引けないのですよね。

もう一つだけ良いですか　?
Imageにxx.png画像をセットしてその上に塗りたいのですが?
public Color foregroundColor ; にして
デフォルトでImageにセットしてもダメなのです。

[Bongo]

では、Startを...

private void Start()
{
this.rectTransform = this.transform as RectTransform;
this.image = this.GetComponent<Image>();
var sizeDelta = this.rectTransform.sizeDelta;
var width = (int)sizeDelta.x;
var height = (int)sizeDelta.y;
var backgroundPixels = (this.image.mainTexture as Texture2D).GetPixels32();
this.image.sprite = null;
this.texture = new Texture2D(width, height, TextureFormat.ARGB32, false) {filterMode = FilterMode.Bilinear};
this.texture.SetPixels32(backgroundPixels);
this.texture.Apply();
this.textureSize = new Vector2Int(width, height);
this.UpdateSprite();
}

として、Imageに元々セットされているテクスチャから色の配列を取得し、それをお絵かき用テクスチャにセットしてみてはいかがでしょうか。ただし注意点として、元々のテクスチャのサイズはImageのサイズと同じであること（そうしないとピクセルの総数が合わず、SetPixels32に失敗します）と、元々のテクスチャのインポート設定の「Advanced」→「Read/Write Enabled」をオンにしておくこと（そうしないとGetPixels32でピクセルを読み取れません）が必要です。

[29507-01]

本当に!! 丁寧に有難うございました。