Vue と Canvas を使用してリアルな油絵効果を作成する方法

Vue と Canvas を使用してリアルな油絵効果を作成する方法

はじめに:
油絵は、豊かな質感と繊細な効果で世界的に有名です。現在では、Vue や Canvas の強力な機能により、油絵のリアルな効果をプログラミングでシミュレートすることができます。この記事では、Vue と Canvas を使用してリアルな油絵効果を作成する方法を紹介し、対応するコード例を添付します。

1. 準備
まず、Vue プロジェクトに Canvas 要素を導入する必要があります。 Vue コンポーネントのテンプレートに Canvas タグを追加し、一意の ID を与えます。例:

<template>
  <canvas id="oil-painting-canvas"></canvas>
</template>

次に、後続の操作のために Vue コンポーネントの計算済みプロパティの Canvas 要素を取得します。

computed: {
  canvasElement() {
    return document.getElementById('oil-painting-canvas')
  }
}

同時に、描画コンテキストを取得する必要があります:

computed: {
  canvasContext() {
    return this.canvasElement.getContext('2d')
  }
}

2. 基本イメージを描画します
油絵の効果を作成し始める前に、基本イメージを描画する必要があります。 Canvas を最下位レイヤーとして使用します。これはどんな写真でもかまいません。 Vue コンポーネントのライフサイクル フック関数 mounted() で、画像を Canvas に描画します。

mounted() {
  const image = new Image()
  image.src = require('@/assets/base-image.jpg')
  image.onload = () => {
    this.canvasContext.drawImage(image, 0, 0)
  }
}

このようにして、Canvas 上に基本的な画像を描画することに成功しました。

3. 油絵効果の作成
次に、キャンバスに油絵効果を追加します。 Vue コンポーネントの計算されたプロパティで、油絵の効果をシミュレートするメソッドを定義します。

computed: {
  oilPaintingEffect() {
    const imageData = this.canvasContext.getImageData(0, 0, this.canvasElement.width, this.canvasElement.height)
    const data = imageData.data

    for (let i = 0; i < data.length; i += 4) {
      const r = data[i]
      const g = data[i + 1]
      const b = data[i + 2]

      const gray = 0.2989 * r + 0.587 * g + 0.114 * b // 将像素点转化为灰度值

      data[i] = data[i + 1] = data[i + 2] = gray // 将RGB值设置为灰度值，使图片变成黑白色调
    }

    this.canvasContext.putImageData(imageData, 0, 0)
  }
}

上記のコードでは、getImageData() メソッドを使用して、油絵のデータを取得します。 Canvas 上の各ピクセルを描画し、RGB 値の平均をグレースケール値として使用してピクセルを白黒のトーンに変換し、油絵の効果をシミュレートします。最後に、処理された画像データは、putImageData() メソッドを通じて Canvas に再描画されます。

4. インタラクティブ性の追加
インタラクティブ性を追加することで、ユーザーが油絵効果を操作できるようにします。 Vue コンポーネントのメソッドで、インタラクティブな効果を実現するためにマウス イベント リスナーを追加します。

methods: {
  handleMousemove(event) {
    const x = event.offsetX
    const y = event.offsetY

    const imageData = this.canvasContext.getImageData(0, 0, this.canvasElement.width, this.canvasElement.height)
    const data = imageData.data

    for (let i = 0; i < data.length; i += 4) {
      const distance = Math.sqrt((x - i / 4 % this.canvasElement.width) ** 2 + (y - Math.floor(i / 4 / this.canvasElement.width)) ** 2)
      const opacity = Math.max(0, 0.8 - distance / 100) // 控制透明度，距离鼠标越远，透明度越低

      data[i + 3] = opacity * 255 // 将透明度应用到像素点上
    }

    this.canvasContext.putImageData(imageData, 0, 0)
  }
}

このコードでは、マウス移動イベントをリッスンし、マウスの座標を計算します。ピクセルに対するマウスの距離を計算することにより、透明度の変化が制御され、油絵効果のインタラクティブ性が実現されます。

5. イベント バインディング
上記のインタラクティブな効果を有効にするには、マウス イベントを Canvas 要素にバインドする必要があります。 Vue コンポーネントのテンプレートで、handleMousemove メソッドを Canvas の Mousemove イベントにバインドします。

<template>
  <canvas id="oil-painting-canvas" @mousemove="handleMousemove"></canvas>
</template>

結論:
Vue と Canvas を組み合わせることで、コードを使用して油絵のリアルな効果とインタラクティブ性を実現します。この記事では、Vue プロジェクトでリアルな油絵効果を作成する方法と、対応するコード例を示します。この記事がお役に立てば幸いです!

以上がVue と Canvas を使用してリアルな油絵効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。