互動網頁彙整 | Creative Coding TW - 互動程式創作台灣站

【徵文賞-動態網頁】優選｜使用前端技術製作自己的修圖軟體吧（Python + OpenCV + eel） – 林慶佳

creativecoding-editor — Thu, 24 Nov 2022 14:54:53 +0000

前言

個人半學期的期末報告專案，因為想做的更好，所以自行研究了 Python 結合前端介面技術的幾個框架。

建議先備知識

前端開發經驗。
Python 使用經驗。
OpenCV 使用經驗。

最終成果預覽

Python UI 介面選擇

一開始課堂上是教預設的Qt軟體，但我覺得Qt醜醜的，所以忍不住去嘗試其他框架。

Tkinter

跟以前做window form很像，用程式碼掛載與編排UI物件。

from tkinter import *

root = Tk()
#創建label widget
myLabel = Label(root, text="Hello world! ")
# show on screen
myLabel.pack()

root.mainloop()

Qt Designer

在Anaconda預設功能， Anaconda資料夾下找到designer.exe啟動。

排版檔案會取為.ui附檔名，操作邏輯與Tk類似。

範例: 讀取圖片、變暗處理。

#CallMyWindow1.py
import cv2
import numpy as np
from PyQt5.QtGui import *
import sys
from PyQt5.QtWidgets import *
from Mywindow3 import *

class MyMainWindow(QMainWindow, Ui_MainWindow):
	def __init__(self, parent=None):
		super(MyMainWindow, self).__init__(parent)
		self.setupUi(self)
		self.loadBtn.clicked.connect(self.btnLoadfile_clicked)
		self.darkenBtn.clicked.connect(self.btnDarking_clicked)
       #讀取圖片 - 按鈕
	def btnLoadfile_clicked(self):
		global img
		img=cv2.imread("Baboon.bmp")
		imgBGR = cv2.resize(img, (300, 300), interpolation=cv2.INTER_CUBIC)
		imgRGB = cv2.cvtColor(imgBGR, cv2.COLOR_BGR2RGB)
		height, width = imgRGB.shape[:2]
		qimg = QImage(imgRGB, width, height, QImage.Format_RGB888)
		qpix = QPixmap.fromImage(qimg)
		self.img.setPixmap(qpix)
        #圖片變暗 - 按鈕
	def btnDarking_clicked(self):
               #........
		self.resImg.setPixmap(qpix)

if __name__=="__main__":
	app = QApplication(sys.argv)
	myWin = MyMainWindow()
	myWin.show()
	sys.exit(app.exec_())

Eel

讓使用者能用前端技術做UI的Python框架，內部使用Bottle Server框架，但不像flask能直接host在線上。

from turtle import position
import eel
import os
#eel.init('./web') #資料夾
eel.init(f'{os.path.dirname(os.path.realpath(__file__))}/web')
eel.start('main.html',size=(400,200),position=(500,500)) #網頁

#eel.start('main.html',mode ='chrome-app') #網頁 (app模式)

Flask / Django

使用Python編寫的輕量級Web應用框架。

範例: flask基本頁面，但其網頁模板概念跟Django雷同。

from flask import Flask
app= Flask(__name__);

@app.route('/')
def index():
    return "hello worldd123456"

if __name__ =='__main__':
    app.run(debug=True , use_reloader=False port=5000 , host='0.0.0.0')

範例: Django網頁

創個views.py檔案，裡面定義Hello頁面內容

from django.http import HttpResponse

def Hello(request):
    return HttpResponse("Hello world")

在urls.py定義Hello頁面的網址

from django.contrib import admin
from django.urls import path

#from django.conf.urls import url
from django.urls import include, re_path
from . import views

urlpatterns = [
    path('admin/', admin.site.urls),
    #url(r'^$' , views.Hello)
    re_path(r'^$' , views.Hello)  #re_path使用regex
]

框架名稱	優點	缺點
Tkinter	像是用Python程式碼撰寫介面的Qt Designer。	邏輯與QtDesigner類似，同樣無法解決程式碼攏長、難做排版等問題。
Flask/Django	較完整且可部屬網頁的web應用框架。	Python與前端邏輯溝通較複雜，需使用ajax等呼叫方式。
eel	旨在於結合前端技術開發桌面應用程式，前後端邏輯串接容易。	我試著包在docker環境下部屬但失敗多次，雖然文獻不多但似乎eel不支援網站部屬。

EEL基本使用

(推薦影片: https://youtu.be/FNPW2ZFksCQ)

python 呼叫js方法

python 方法上加@eel.expose 讓js端可以呼叫。

import eel
import os

@eel.expose
def print_js():
    print("Hi hi")


#eel.init('./web') #資料夾
eel.init(f'{os.path.dirname(os.path.realpath(__file__))}/web')
eel.start('main.html',mode ='chrome-app') #網頁 (app模式)

func.js檔案:

function hello(){
    eel.print_js()()
}

Async方法使用

import random
import eel
import os

@eel.expose
def getnum():
    return random.randint(0,100)

#eel.init('./web') #資料夾
eel.init(f'{os.path.dirname(os.path.realpath(__file__))}/web')
eel.start('main.html',mode ='chrome-app') #網頁 (app模式)


eel.sleep(5)
#time.sleep(5) 要sleep就用eel

async function doA(){
    var a=await eel.getnum()()
    alert(a)

}

按下按鈕後，js端等待python處理結果後出現alert。





    
    
    
    




    Hell world

JS-EEL圖檔傳輸

跨語言開發首先遇到的問題便是如何傳遞圖片資訊? 由於處理後的圖片需轉換成前端html可顯示的based64編碼，其跟openCV imread讀取進來的圖片格式之間的關係又是如何? 為此我必須先了解從HTML的input 標籤輸入的圖片至python端之間的格式與轉換。我整理出如下圖這個流程：

(1.) 由input標籤開啟的圖片為大型二進位檔物件(Binary Large Object ,blob)，代表了一個相當於檔案（原始資料）的不可變物件。

(2.) 需實作js的FileReader物件，將blob轉碼成based64字串。

(3.) 透過eel框架傳送字串至Python端。

(4.) 使用based64處理套件將字串解析成byte陣列。

(5.) 透過numpy將byte陣列轉成uint8陣列。

(6.) 透過cv2套件將uint陣列解碼成圖片，此時得到的檔案形同於imread進來的圖片。

(7.) 使用圖片資料進行影像處理操作。

(8.) 將處理完的圖片回傳至前端作顯示時，逆著遵循前述的轉碼步驟，先將圖片轉成byte陣列，再以based64編碼成字串透過eel框架溝通回前端，由js接收並設定img標籤的src。

JS讀取圖片

使用jQuery偵測input標籤Change事件，搭配fileReader轉成base64字串。

$("#img").on("change", function () {
  var file = this.files[0];
  const fr = new FileReader();
  fr.onload = function (e) {
    preview.src = e.target.result;
    currentFile = e.target.result;
    console.log(e.target.result);
  };

  if (file) {
    fr.readAsDataURL(file);
  } else {
    console.log("沒有檔案");
  }
  console.log(file);
});

Python接收圖片

將base64字串透過轉碼，轉成opencv可使用的格式。

def data_uri_to_cv2_img(uri):
     encoded_data = uri.split(',')[1]
    img = base64.b64decode(encoded_data)
    npimg = np.frombuffer(img, np.uint8)
    image = cv2.imdecode(npimg,cv2.IMREAD_COLOR)
    return image

搭配OpenCV

範例: 將圖片轉灰階

https://i.imgur.com/SriZ52F.mp4

eel.expose(SetImg);
function SetImg(newimg) {
  preview.src = "data:image/png;base64," + newimg
}

function Gray() {
  currentFile = preview.src;
  eel.toGray(currentFile);
}

import base64
import random
from cv2 import imread
import eel
import os
import cv2
import numpy as np

def data_uri_to_cv2_img(uri):
     encoded_data = uri.split(',')[1]
    img = base64.b64decode(encoded_data)
    npimg = np.frombuffer(img, np.uint8)
    image = cv2.imdecode(npimg,cv2.IMREAD_COLOR)
    return image

@eel.expose
def toGray(url):
    img = data_uri_to_cv2_img(url)
    img=cv2.cvtColor(img,cv2.COLOR_BGR2GRAY)
    #TODO:.....回傳

eel.init(f'{os.path.dirname(os.path.realpath(__file__))}/web')
eel.start('main.html',mode ='chrome-app') #網頁 (app模式)

Python傳回圖片

def img_to_base64(img):
    b64_str = cv2.imencode('.png', img)[1].tobytes()
    blob = base64.b64encode(b64_str)
    blob = blob.decode('utf-8')
    return blob

直方圖

直方圖常常用在檢視圖片顏色趨勢、集中位置等等。 (一開始使用Chart.js插件)

js 端

// 直方圖
eel.expose(UpdateGarphData);
function UpdateGarphData(graphID , b,g,r) {
  var labs= [Array.from({ length: 255 }).map((currentElement, i) => i)]
  const ctx = document.getElementById(graphID).getContext("2d");

  const chart = new Chart(ctx, {
    type: "bar",
    data: {
      labels:labs[0],
      datasets: [
        {
          label: "b",
          data: b,
          backgroundColor: "blue",
        },
        {
          label: "g",
          data: g,
          backgroundColor: "green",
        },
        {
          label: "r",
          data: r,
          backgroundColor: "red",
        },
      ],
    },

  });
}

@eel.expose
def histGraph(url):
    img = data_uri_to_cv2_img(url)

    # 單色
    if img.ndim !=3:
        b=cv2.calcHist( [img], [0], None, [256], [0,256] )
        b= b.astype("float").flatten().tolist()

    # 彩色
    else:
        b=cv2.calcHist( [img], [0], None, [256], [0,256] )
        g=cv2.calcHist( [img], [1], None, [256], [0,256] )
        r=cv2.calcHist( [img], [2], None, [256], [0,256] )
        b= b.astype("float").flatten().tolist()
        g= g.astype("float").flatten().tolist()
        r= r.astype("float").flatten().tolist()

    eel.UpdateGarphData("histogram",b,g,r)()

注意np array無法直接傳輸，所以要轉成一般array。

瀏覽器無法像Python的numpy與的plot套件快速做統計與圖表，加上本身也不支援多線程(Multi-threading)，因此當圖片解析度大，需要統計的數變多，前端直方圖生成便會延遲，除了採用異步執行避免程序卡死外，我還試過多個輕量圖表套件如Chart.js、dygraphs、EChart.js，尋找對資料最友善的解決方案，雖然目前前端直方圖生成仍有延遲存在，是日後需想辦法解決的問題(目前已是在Python生成直方圖數據，再傳輸至前端表現，理論上只需處理255*3個顏色資料，我認為會卡的點在於繪製與自動尋找最小至最大值區間)。

等化功能

等化是將像素顏色拉得平均一點。

@eel.expose
def equalizeHist(url):
    img = data_uri_to_cv2_img(url)
    g=img.copy()
    #單色
    if g.ndim!=3:
        g=cv2.equalizeHist( img );
    #彩色
    else:
        for i in range(0,3):
            g[:,:,i]=cv2.equalizeHist(img[:,:,i])

    histGraphByImg(g)
    blob = img_to_base64(g)
    eel.SetImg(blob)()

操作Hot Key

註冊document事件，並藉由array紀錄各步驟的base64字串。

const maxSaves=10;
const previousSaves = [];
const nextSaves = [];
//上一步
function BackToPreviouse() {
  if (previousSaves.length > 0) {
    base_str=previousSaves.pop();
    preview.src = base_str;
    SaveNextStep(base_str)
  }
}
//下一步
function BackToNext(){
  if (nextSaves.length > 0) {
    base_str=nextSaves.pop();
    SaveStep(base_str);
    preview.src = base_str;
  }
}
//紀錄步驟
function SaveStep(bs64){
  if(previousSaves.length



範例：上下一步熱鍵。



JS寫出圖片



源圖與輸出圖。



// Save as
async  function SaveAs() {
  const opts = {
    types: [
      {
        description: "Images",
        accept: {
          "image/*": [".png", ".gif", ".jpeg", ".jpg"],
        },
      },
    ],
    excludeAcceptAllOption: true,
    multiple: false,
  };

  //base64 轉 blob
  const url= decodeURIComponent(preview.src).split(",")[1];
  const imgBlob = Uint8Array.from(atob(url), c => c.charCodeAt(0));
  console.log(imgBlob);

  const newHandel = await window.showSaveFilePicker(opts);
   const writableStream = await newHandel.createWritable();

   // write our file
   await writableStream.write(imgBlob);

   // close the file and write the contents to disk.
   await writableStream.close();
}



拖拉圖片




https://i.imgur.com/RqCFjm8.mp4




//preview 畫布拖拉
$(function () {
  $("#preview").draggable();
});

//畫布滑鼠滾輪縮放
function zoom(event) {
  event.preventDefault();

  scale += event.deltaY * -0.02;

  // Restrict scale
  scale = Math.min(Math.max(0.125, scale), 500);
  $("#preview_slider").val(scale).change();

}

let scale = 1;
const el = document.querySelector("#preview");
el.onwheel = zoom;

el.addEventListener("wheel", zoom);



JS事件



在修改圖片時觸發事件，如此便能最後續處理，例如圖片縮圖僅需在圖片有更動時才須更新。




https://i.imgur.com/meu6jW1.mp4




//修改圖片事件：
$(document).on("mainImageChanged",function(e,eventInfo){
  console.log(eventInfo);
  //.....
})

//修改圖片
function SetImg(newimg) {
  preview.src = "data:image/png;base64," + newimg;

	//觸發事件
  $(document).trigger("mainImageChanged",preview)
}



顏色通道



圖片RGB拆成可以分別開關的通道，在P圖的時候常會從通道中選一張二值化效果最好的通道做遮罩，不過目前本軟體的通道只能顯示、不能編輯(;´༎ຶД༎ຶ`)  (時間不夠..)。





















@eel.expose
def useChannel(url, isR, isG, isB):
    isR = bool(isR)
    isG = bool(isG)
    isB = bool(isB)
    img = data_uri_to_cv2_img(url)

    g = np.zeros(img.shape)

    if isR:
        g[:, :, 2] = img[:, :, 2]
    if isB:
        g[:, :, 0] = img[:, :, 0]
    if isG:
        g[:, :, 1] = img[:, :, 1]

    blob = img_to_base64(g)
    eel.SetImg(blob)()



在地化



加上為了降低開發環境複雜度，本軟體前端使用較原生的JQuery輔助，沒有用如React.js等完整的web生態系統，能使用的工具較為受限，最後使用行之有名的i18n在地化解決方案應付小需求翻譯。



$.i18n({
  //不要打預設語系就會自動抓瀏覽器語言
  //locale: "zh-TW",
  //locale: "en",
});

$.i18n()
  .load({
    en: "/i18n/en.json",
    'zh-TW': "/i18n/zh-TW.json",
  })
  .done(function () {
    $('body').i18n();
  });


function SetLanguage(lang){
  $.i18n().locale = lang;
  $('body').i18n();
}



在地化效果。



簡易圖層



將兩張圖疊在一起




        
            加入圖片
            
            
                
                
                
                
                    
                
                
                
            
        



HTML操作按鈕









//疊圖層
function OverlayerImage(){
  b64_str = realImage;
  layer_b64_str =newLayerImage.src ;
  opt=overlayMethod.value;
  SaveStep(b64_str);
  eel.overlayImage(b64_str,layer_b64_str,opt)

}





def overlayImage(url,layerUrl,opt):
    img = data_uri_to_cv2_img(url)
    img_overlay = data_uri_to_cv2_img(layerUrl)
    
    h, w = img_overlay.shape[:2]    
    hh, ww = img.shape[:2]    

    yoff = np.clip( round((hh-h)/2),0,hh)
    xoff =np.clip( round((ww-w)/2),0,ww)
    
    yMax= np.clip(yoff+h , 0 , hh)
    xMax= np.clip(xoff+w , 0 , ww)
    print(yoff,xoff , "|",yMax,xMax)

    xMin= min(ww,w)
    yMin= min(hh,h)

    result = img.copy()
    result[yoff:yMax, xoff:xMax] = img_overlay[:yMin,:xMin] #避免取出邊界
    
    blob = img_to_base64(result)
    eel.SetImg(blob, false, false)()





小優化 — 副檔名溝通



原本以png回傳，但圖片大小因此暴增10倍



# 圖片轉base64
def img_to_base64(img):
    b64_str = cv2.imencode(".png", img)[1].tobytes()
    blob = base64.b64encode(b64_str)
    blob = blob.decode('utf-8')
    print("process Time --- %s seconds ---" % (time.time() - start_time))
    return blob





jpg編碼檔案大小: 120KB





png檔案變成 1MB





解決辦法：互相溝通檔案型態





if (file) {
    fr.readAsDataURL(file);
    console.log(file);
    currentFileExtension =file.type.split("/")[1];
    //更新 footer KB數
    $("#fileSize_text").html(Math.round(file.size / 1024) + "KB");
    //設定副檔名
    eel.setFileExtension(currentFileExtension)
  } else {
    console.log("沒有檔案");
    alert("不支援檔案類型");
  }





@eel.expose
def setFileExtension(ext):
    global current_file_extension
    current_file_extension="."+ext













【補充】



Base64 轉法造成卡頓?



原本以為卡頓問題是反覆的base64轉碼造成的。



import time
image =""

# base64轉np image
def data_uri_to_cv2_img(uri, forceUpdate=false):
    global image
    start_time = time.time()
    #print(image)
    if image!="" and not forceUpdate:
        return image

    uri_spt = uri.split(',')
    if(len(uri_spt)>1):
        encoded_data=uri_spt[1]
    else:
        encoded_data=uri_spt[0]
  
    img = base64.b64decode(encoded_data)
    npimg = np.frombuffer(img, np.uint8)
    image = cv2.imdecode(npimg, cv2.IMREAD_COLOR)
    print("base 64 decode Time --- %s seconds ---" % (time.time() - start_time))
    return image



做了點log發現轉碼所需時間不長，主要問題是Chart.js插件效能問題。(javascript – ChartJS is slow – Stack Overflow)



base 64 decode Time --- 0.010005474090576172 seconds ---
base 64 decode Time --- 0.007999897003173828 seconds ---
base 64 decode Time --- 0.008002042770385742 seconds ---
base 64 decode Time --- 0.007974386215209961 seconds ---
base 64 decode Time --- 0.007002353668212891 seconds ---
base 64 decode Time --- 0.0069997310638427734 seconds ---
base 64 decode Time --- 0.00800013542175293 seconds ---
base 64 decode Time --- 0.007972240447998047 seconds ---
base 64 decode Time --- 0.007972240447998047 seconds ---







ERROR : WebSocket connection to ‘ws://localhost:8000/eel?page=main.html’ failed: Could not decode a text frame as UTF-8



https://github.com/python-eel/Eel/issues/299



在js呼叫另一個eel方法時，上一個還沒結束產生的ERROR。







打包輸出exe檔案



Eel is a little Python library for making simple Electron-like offline HTML/JS GUI apps, with… (curatedpython.com)



*EelPoriect拼錯字



cd src
python -m eel app.py web

---
python -m eel ./src/app.py ./src/web
這篇文章 【徵文賞-動態網頁】優選｜使用前端技術製作自己的修圖軟體吧（Python + OpenCV + eel） – 林慶佳 最早出現於 Creative Coding TW - 互動程式創作台灣站。

【互動網頁程式教學】活用GUI Object與繼承概念，完成Canvas物件導向的滑鼠拖曳互動

creativecoding-editor — Thu, 16 Jun 2022 02:19:00 +0000

很多的讀者經常使用像是canvas這樣的函式庫，東西已經包裝成物件，可以輕鬆的拖曳、偵測點擊。這次的老闆週四寫程式，要來教大家在不使用函示庫的情況下，直接使用純繪圖的canvas生成物件，並偵測事件，來用滑鼠點選跟拖曳物件。

Canvas 物件導向與繼承，來做個土炮架構控制元件吧！（上）成品圖

目標

這篇文章將會讓你學到：

向量的基礎知識
把純繪圖的canvas包成物件的架構
利用物件導向完成元件與滑鼠的基礎互動

架構

此次影片要實作圖形使用者介面（Graphical User Interface，本篇後以GUI稱之）作為小畫家的操作介面。GUI是採用圖形方式顯示的使用者介面，讓使用者可以使用滑鼠或相關設備操縱螢幕上的圖標或菜單選項，跟早期的電腦使用命令列介面相比，讓使用者在視覺上更容易接受。

實作GUI前，可以先了解一下物件設計的架構：

成品中的每個方塊都是一個GUI object
而所有的方塊可以形成一個GUI group
最後再交由GUI scene 畫出整個場景

GUI結構示意圖

GUI結構範例

了解向量

向量加法示意圖

在畫布的操作中，位置是很重要的一環，位置通常由座標（通常是x,y）構成，物件的起始位置與終點位置，可以看作為「座標的變化量」，而「向量」正是可以輕鬆的表示出座標的變化。（小觀念：向量的定義為 方向的變化量 ）

在程式碼中使用「向量」概念

先來做一個向右跑的小方塊作為使用向量的範例。我們把 HTML 的 Preprocessor 設為 Pug 再把 CSS 設為 Sass，在 HTML 中先畫一個 canvas#mycanvas。

使用「座標」畫出白色方塊物件並讓物件向右移動：

// JS setting
var ww,wh
var canvas = document.getElementById("mycanvas")
var ctx = canvas.getContext("2d")
function init(){
  ww = window.innerWidth
  wh = window.innerHeight
  canvas.width = ww
  canvas.height = wh
}
init()
window.addEventListener("resize",init)
 
//使用「座標」定義物件
var obj = {
  p:{
    x: 0,
    y:0
  },
  size:{
    x:100,
    y:100
  },
  v:{
    x:5,
    y:0
  }
}
function draw(){
  ctx.fillStyle="black" //把上一個畫面蓋掉
  ctx.fillRect(0,0,ww,wh) //把上一個畫面蓋掉
  ctx.fillStyle="white"  
  ctx.fillRect(obj.p.x,obj.p.y,obj.size.x,obj.size.y)
}
setInterval(draw,30)
 
function update(){
  obj.p.x += obj.v.x
  obj.p.y += obj.v.y
}
 
setInterval(update,30)

可以從這一段程式碼中，看到定義物件的位置時，需要個別設置x與y的變量，在 update 物件位置時，也需要個別對x與y做處理。

使用「向量」畫出物件及物件移動：

// 定義向量class，並加入向量的加(add)減(sub)乘(mul)運算
class Vec2{
  constructor(x,y){
    this.x=x
    this.y=y
  }
  add(v){
    return new Vec2(this.x+v.x,this.y+v.y)
  }
  mul(s){
    return new Vec2(this.x*s,this.y*s)
  }
  sub(v){
    return this.add(v.mul(-1))
  }
}
 
var obj = {
  p: new Vec2(0,0), // new 一個向量物件
  size:new Vec2(100,100), // new 一個向量物件
  v: new Vec2(5,0) // new 一個向量物件
}
function draw(){
  ctx.fillStyle="black"
  ctx.fillRect(0,0,ww,wh)
  ctx.fillStyle="white"  
  ctx.fillRect(obj.p.x,obj.p.y,obj.size.x,obj.size.y)
}
setInterval(draw,30)
 
function update(){
  obj.p = obj.p.add(obj.v) //使用向量概念中的「相加」
}

setInterval(update,30)

先實作出一個向量類 Vec2，後續使用 new Vec2 就可以使用向量。在後續需要大量生成物件時，可以比座標更容易生成大量物件。

小結：使用向量物件讓程式碼更簡潔，也讓位置設置變得更容易了。

實作

此次實作會用到老師預先製作好了template，內容包含了向量類 Vec2、畫布設置以及一些滑鼠的事件及記錄，可以參考這裏，需要的同學可以fork一份回自己的codePen再往下繼續做呦！

製作物件

一開始需要建立一個GUIObject 類，方便後續快速製造出大量的GUI object。另外再預先定義一個Scene類，並且在裡面增加 addChild()，把所有的GUIObject可以放在children 中，方便畫出。

class  GUIObject{
  constructor(args){
    let def={
      p: new Vec2(0,0),
      size: new Vec2(0,0)
    }
    Object.assign(def,args)
    Object.assign(this,def)
  }
  draw(){
    ctx.fillStyle="white"
    ctx.fillRect(this.p.x,this.p.y,this.size.x,this.size.y)
  }
}
 
class Scene{
  constructor(args){
    let def={
      children: []
    }
    Object.assign(def,args)
    Object.assign(this,def)
  }
  addChild(obj){
    this.children.push(obj)
  }
  draw(){
    this.children.forEach(obj=>{
      obj.draw()
    })
  }
}

接著可以利用剛剛定義好的GUIObject直接畫出一個長方形。

var rect = new GUIObject({ 
  p: new Vec2(30,30),
  size: new Vec2(100,30)
})
 
function draw(){
  ...
  rect.draw()
  ...
}

利用物件導向畫出一個方塊

函式多載

現在要來做一點程式碼的優化。

函式多載是讓一個同名函式帶入的參數可以有不同類型跟不同數量。在函式內做類型判別跟數量判別，可以讓後續在呼叫函式的時候更容易。

現在scene的addChild只能放入一個物件，並且無法判斷進入的物件是不是scene期待的GUIObject。因此要在這邊修改addChild，讓user給什麼都可用，無論是給一個GUIObject、給多個GUIObject或給一個array都可以運行。

addChild(){
  if (arguments.length==1){ // 如果input的arguments只有一個
    if(arguments[0] instanceof GUIObject){ // 如果input的剛剛好是GUIObject
      this.children.push(arguments[0])
    }
    if(arguments[0] instanceof Array){ // 如果input的是array，這邊暫時不檢查裡面是否皆為GUI object
      this.children = this.children.concat(arguments[0])
    }
  }else{
    for(var i=0;i



addChild得到的input為arguments, 可以看到程式碼中對arguments進行判斷與操作。我們在這邊繪製兩個長方形，讓Scene蒐集GUIObject後一起畫出。（後續會使用這個方式）



var scene = new Scene()
function init(){
  let rect = new GUIObject({
    p: new Vec2(30,30),
    size: new Vec2(100,30)
  })
  let rect2 = new GUIObject({
    p: new Vec2(130,30),
    size: new Vec2(200,200)
  })
  scene.addChild(rect,rect2) // 防呆裝置已啟動
}
function draw(){
  scene.draw()
}




利用修改後的function生成多個方塊



物件與滑鼠互動



完成物件後，我們最後要加入滑鼠與物件的幾種互動。



(1) 滑鼠靠近方塊，改變顏色



這個小動態的目的是要讓user知道滑鼠有沒有放在物件上，先讓物件亮度降低，當物件與滑鼠位置重疊，便讓物件亮度上升：



a. 新增一個 isHovering 參數，如果是true就調整物件亮度



class GUIObject{ 
  constructor(args){
    let def={
      ...,
      isHovering: false // 新增一個 isHovering 參數，預設為false
    }
   ...
  }
  draw(){
    ctx.fillStyle="rgba(255,255,255,0.4)"
    if (this.isHovering){
      ctx.fillStyle="rgba(255,255,255,1)"
    }
    ...
  }
}




b. 要偵測滑鼠位置（在Scene 類加入事件偵測）



class Scene{ 
  constructor(args){
    let def={
      ...,
      el: null // 要知道是哪個document, 在new的時候指定
    }
    ...
    this.init()
  }
  init(){
    // 事件偵測
    this.el.addEventListener("mousemove",(evt)=>{
      let mousePos = new Vec2(evt.x,evt.y) // 拿滑鼠位置
      // 處理滑鼠移動
      this.children.forEach(obj=>{
        obj.handleMouseMove(mousePos) //傳入滑鼠位置
      })
    })
  }
}
 
// 在new的時候指定document
var scene = new Scene({
  el: document.querySelector("canvas")
})




c. 加入 handleMouseMove 來改變 isHovering 參數的值



class GUIObject{
  ...
  handleMouseMove(pos){
    let point1 = this.p,
        point2 = this.p.add(this.size)
    // 判斷滑鼠是否在物件範圍內
    if (pos.x>point1.x && pos.x < point2.x &&
      pos.y>point1.y && pos.y < point2.y){
      this.isHovering = true
    }else{
      this.isHovering = false
    }
  }
}



滑鼠靠近方塊，改變方塊顏色並改變鼠標圖示



(2) 用滑鼠拖移方塊



當滑鼠位置與物體重疊時，點擊滑鼠右鍵，可以拖移物件：



a. 新增 isDraggable 參數來決定物件是否可以被拖移



class GUIObject{
  constructor(args){
    let def={
      ...
      isDraggable: false
    }
    ...
  }
 
// 在new GUIObject時要記得把 isDraggable設成true
function init(){
  let rect = new GUIObject({
    p: new Vec2(30,30),
    size: new Vec2(100,30),
    isDraggable: true
  })
}




b. 新增 InRange function 來判斷滑鼠位置是否在物件內 （可以重複使用）



class GUIObject{
  ...
  inRange(pos){
    let point1 = this.p,
        point2 = this.p.add(this.size)
    return pos.x>point1.x && pos.x < point2.x &&
           pos.y > point1.y && pos.y < point2.y
  }
  ...
}




c. 新增 dragging 參數來判斷物件是否正在被拖移中



class GUIObject{
  constructor(args){
    let def={
      ...
      isDraggable: false,
      dragging: false
    }
   ...
  }
}



d. 新增 handleMouseDown 及 handleMouseUp 來處理滑鼠按鍵的事件處理



class GUIObject{
  ...
  handleMouseMove(pos){
  if (this.inRange(pos) ){
    this.isHovering = true
  }else{
    this.isHovering = false
  }
  if (this.dragging){
    this.p = this.p.add(pos.sub(this.lastPos))
    this.lastPos = pos
  }
}
 
handleMouseDown(pos){
  if (this.inRange(pos)){
    this.lastPos = pos
    if (this.isDraggable){
      this.dragging = true
    }
  }
}
handleMouseUp(){
  this.lastPos = null
  this.dragging = false
}




e. 事件偵測加入滑鼠按鍵按下與鬆開的偵測



class Scene{
  ...
  init(){
    ...
    // 按下滑鼠按鍵
    this.el.addEventListener("mousedown",(evt)=>{
      let mousePos = new Vec2(evt.x,evt.y)
      this.children.forEach(obj=>{
        obj.handleMouseDown(mousePos)
      })
    })
    // 放開滑鼠按鍵
    this.el.addEventListener("mouseup",(evt)=>{
      let mousePos = new Vec2(evt.x,evt.y)
      this.children.forEach(obj=>{
        obj.handleMouseUp(mousePos)
      })
    })
 ...



f. 改變鼠標，當鼠標指到物件時，鼠標會從箭頭變成👉🏻



class Scene{
  constructor(args){
    let def={
      …
      flag: false
    }
  }
  ...
  update(){
    if(this.flag){
      this.el.style.cursor="pointer"
    }else{
      this.el.style.cursor="initial"
    }
  }
  init(){
    let flag = false
    this.el.addEventListener("mousemove",(evt)=>{
      this.flag = false
      let mousePos = new Vec2(evt.x,evt.y)
      this.children.forEach(obj=>{
        if(obj.handleMouseMove(mousePos)){
          this.flag = true
        }
      })
    })
  }
  ...
}
// 讓scene update起來
function update(){
  time++
  scene.update()
}




滑鼠拖移方塊位置成果圖



完成滑鼠與物件的基礎互動啦！



結語



以上就是老闆利用Canvas做滑鼠控制物件的網頁基礎互動，這次在前面講解概念的部分花了較多時間，來不及完成小畫家，希望對於剛開始接觸 Canvas 的你有一些幫助。



再次快速總結步驟：



利用GUI Object的概念，快速畫出多個物件
加上事件偵測，讓滑鼠位置與物件互動，達成亮度的提示
加上滑鼠按鍵的事件偵測，讓滑鼠拖移物件



看著框框跟隨著滑鼠的移動，真的很有成就感啊！







老闆的工商時間



想了解更多如何寫出漂亮清晰的網頁嗎？老闆在 Hahow 的教學課程 動畫互動網頁程式入門(HTML/CSS/JS) 用平易近人的語言，用簡單的方式帶你作出不簡單的網頁。已經有網頁程式基礎了嗎？進階課程 動畫互動網頁特效入門(JS/CANVAS) 能讓你紮實掌握 JavaScript 程式與動畫基礎以及進階互動，整合應用掌控資料與顯示的Vue.js前端框架，完成具有設計感的互動網站。



此篇直播筆記由幫手 Y-Y-H 協助整理




這篇文章 【互動網頁程式教學】活用GUI Object與繼承概念，完成Canvas物件導向的滑鼠拖曳互動 最早出現於 Creative Coding TW - 互動程式創作台灣站。

【互動網頁程式教學】用 GSAP 製作直播互動動態效果

creativecoding-editor — Thu, 10 Mar 2022 05:20:00 +0000

用 GSAP 製作直播互動動態效果成品

本文翻自【互動網頁程式教學】用 GSAP 製作直播互動動態效果，若是對文章內容有疑問，或是想要老闆手把手帶你飛，都可以觀看影片跟著動手做，也附上這次成品。

這次要帶大家使用 vue.js, vue-cli, gsap 來模擬 facebook 手機版的直播畫面，首先將視訊鏡頭中使用者的畫面做為直播畫面，下半部留言區塊點擊表情符號後，表情符號加上彈幕的動畫效果。輸入訊息後，訊息會經由轉場動畫出現在畫面中，使用者也能點選刪除留言來看到訊息的離場動畫。

製作表情符號進出場的動畫會使用到 gsap ，gsap 是由 greenSock所開發，常被用來取代以前的 flash，提供許多製作動畫的套件，包含這次會使用到的 tweenMax 及 timelineMax，由於是透過 js 所撰寫，動畫呈現有更大的自由度。但要注意個人和商用部分功能是免費的，若需引入專案時要多留意。範例中，也會帶大家使用 vue transition 提供的兩種模式，來觸發表情符號與留言的進出場效果。

這次直播筆記會帶大家學會以下內容：

認識 vue 中的 ref, $refs
使用原生 js 載入視訊影像
使用 gsap 製作表情符號過場動畫
使用 vue 中的 transition 製作過場動畫

事前準備

開發環境

老闆在這次專案改使用 CodeSandbox進行開發，關於環境和其他套件的設定，同學可以參考老闆的成品。

CodeSandbox 比起之前老闆示範時常用的Codepen來說，功能較完整一些，除了提供大家建立 project、安裝需要使用的 library 之外，也能在上面跑 npm 的 package 設定。製作大型專案需要測試時，老闆習慣會使用 CodeSandbox ，但小缺點就是不支援 emmet（註：輸入簡化碼後會自動產生完整HTML & CSS程式碼，加快程式碼輸入，也降低手誤機率），撰寫程式碼較不方便一些。

透過 new sandbox 創建新的專案，選擇 Vue( vue2 的 cli)後，可以看到左邊有 files 欄，包含專案所有資料夾及檔案，這次專案只會在 App.vue 這支檔案中開發，同學們不用被資料夾結構嚇到。

打開 App.vue 檔案之後可以發現有三個區塊分別為：

互動網頁 彙整 | Creative Coding TW - 互動程式創作台灣站

【徵文賞-動態網頁】優選｜使用前端技術製作自己的修圖軟體吧（Python + OpenCV + eel） – 林慶佳

Python UI 介面選擇

Tkinter

Qt Designer

Eel

Flask / Django

範例: flask基本頁面，但其網頁模板概念跟Django雷同。

範例: Django網頁

EEL基本使用

python 呼叫js方法

Async方法使用

Hell world

JS-EEL圖檔傳輸

搭配OpenCV

直方圖

操作Hot Key

JS寫出圖片

拖拉圖片

JS事件

顏色通道

在地化

簡易圖層

小優化 — 副檔名溝通

【互動網頁程式教學】活用GUI Object與繼承概念，完成Canvas物件導向的滑鼠拖曳互動

目標

架構

了解向量

在程式碼中使用「向量」概念

實作

製作物件

函式多載

物件與滑鼠互動

(1) 滑鼠靠近方塊，改變顏色

(2) 用滑鼠拖移方塊

結語

老闆的工商時間

【互動網頁程式教學】用 GSAP 製作直播互動動態效果

這次直播筆記會帶大家學會以下內容：

事前準備

開發環境

接下來會使用到的 API：

Vue

gsap

js – getUserMedia

跟著老闆開始動手做

操作一段與多段動畫

直播畫面與 live 標籤

表情符號功能

改使用 transition 元件製作表情符號動畫

留言區塊

新增/刪除訊息

老闆來結語

【Canvas創作教學】畫個偵測敵人的動態雷達圖網頁

透過此次教學，你會學到

認識常用的 Canvas 屬性

前置作業

設定 Code Pen

引入雲端字形

一、基礎版面

二、基礎版面樣式設置

三、繪製一個矩形

四、畫垂直線

五、利用極座標畫線條

六、扇形掃描線

七、敵人系統

7-1 隨機產生敵人

7-2 敵人在畫面上顯示

7-3 當線條角度與敵人一樣時，將敵人透明度變成 1

7-4 修改敵人樣式

八、修改左下角文字

九、外圍刻度

十、畫龍點睛的線條

回顧

Vue.js入門：英文2000字互動遊戲網頁

前期準備

1. 拆解單字表

資料搬運小幫手Vue

2. 實際運用Vue-單字小卡

3. 製作答題選項

互動網頁彙整 | Creative Coding TW - 互動程式創作台灣站