appinfo add performance features
Appinfo supports outputting to the background, enhancing the performance features of ComfyUI.
This commit is contained in:
shadowcz007
@@ -0,0 +1,323 @@
|
||||
// touchdesigner的背景效果，把appinfo的输出，选择一张图片作为背景
|
||||
|
||||
window._bg_img = null
|
||||
|
||||
/**
|
||||
* draws the back canvas (the one containing the background and the connections)
|
||||
* @method drawBackCanvas
|
||||
**/
|
||||
LGraphCanvas.prototype.drawBackCanvas = function () {
|
||||
var canvas = this.bgcanvas
|
||||
if (
|
||||
canvas.width != this.canvas.width ||
|
||||
canvas.height != this.canvas.height
|
||||
) {
|
||||
canvas.width = this.canvas.width
|
||||
canvas.height = this.canvas.height
|
||||
}
|
||||
|
||||
if (!this.bgctx) {
|
||||
this.bgctx = this.bgcanvas.getContext('2d')
|
||||
}
|
||||
var ctx = this.bgctx
|
||||
if (ctx.start) {
|
||||
ctx.start()
|
||||
}
|
||||
|
||||
var viewport = this.viewport || [0, 0, ctx.canvas.width, ctx.canvas.height]
|
||||
|
||||
//clear
|
||||
if (this.clear_background) {
|
||||
ctx.clearRect(viewport[0], viewport[1], viewport[2], viewport[3])
|
||||
}
|
||||
|
||||
//show subgraph stack header
|
||||
if (this._graph_stack && this._graph_stack.length) {
|
||||
ctx.save()
|
||||
var parent_graph = this._graph_stack[this._graph_stack.length - 1]
|
||||
var subgraph_node = this.graph._subgraph_node
|
||||
ctx.strokeStyle = subgraph_node.bgcolor
|
||||
ctx.lineWidth = 10
|
||||
ctx.strokeRect(1, 1, canvas.width - 2, canvas.height - 2)
|
||||
ctx.lineWidth = 1
|
||||
ctx.font = '40px Arial'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.fillStyle = subgraph_node.bgcolor || '#AAA'
|
||||
var title = ''
|
||||
for (var i = 1; i < this._graph_stack.length; ++i) {
|
||||
title += this._graph_stack[i]._subgraph_node.getTitle() + ' >> '
|
||||
}
|
||||
ctx.fillText(title + subgraph_node.getTitle(), canvas.width * 0.5, 40)
|
||||
ctx.restore()
|
||||
}
|
||||
|
||||
var bg_already_painted = false
|
||||
if (this.onRenderBackground) {
|
||||
bg_already_painted = this.onRenderBackground(canvas, ctx)
|
||||
}
|
||||
|
||||
//reset in case of error
|
||||
if (!this.viewport) {
|
||||
ctx.restore()
|
||||
ctx.setTransform(1, 0, 0, 1, 0, 0)
|
||||
}
|
||||
this.visible_links.length = 0
|
||||
|
||||
if (this.graph) {
|
||||
//apply transformations
|
||||
ctx.save()
|
||||
this.ds.toCanvasContext(ctx)
|
||||
|
||||
//render BG
|
||||
if (
|
||||
this.ds.scale < 1 &&
|
||||
!bg_already_painted &&
|
||||
this.clear_background_color
|
||||
) {
|
||||
ctx.fillStyle = this.clear_background_color
|
||||
ctx.fillRect(
|
||||
this.visible_area[0],
|
||||
this.visible_area[1],
|
||||
this.visible_area[2],
|
||||
this.visible_area[3]
|
||||
)
|
||||
}
|
||||
|
||||
// 主要修改
|
||||
if (this.background_image && this.ds.scale > 0.5 && !bg_already_painted) {
|
||||
if (this.zoom_modify_alpha) {
|
||||
//使得 alpha 越接近0时变化越缓慢。
|
||||
let alpha = (1.0 - 0.5 / this.ds.scale) * this.editor_alpha
|
||||
ctx.globalAlpha = Math.min(Math.max(0, Math.sqrt(alpha)), 1)
|
||||
// console.log((1.0 - 0.5 / this.ds.scale) * this.editor_alpha)
|
||||
} else {
|
||||
ctx.globalAlpha = this.editor_alpha
|
||||
}
|
||||
ctx.imageSmoothingEnabled = ctx.imageSmoothingEnabled = false // ctx.mozImageSmoothingEnabled =
|
||||
if (!this._bg_img || this._bg_img.name != this.background_image) {
|
||||
this._bg_img = new Image()
|
||||
this._bg_img.name = this.background_image
|
||||
this._bg_img.src = this.background_image
|
||||
var that = this
|
||||
this._bg_img.onload = function () {
|
||||
that.draw(true, true)
|
||||
}
|
||||
}
|
||||
|
||||
var pattern = null
|
||||
if (this._pattern == null && this._bg_img.width > 0) {
|
||||
pattern = ctx.createPattern(this._bg_img, 'repeat')
|
||||
this._pattern_img = this._bg_img
|
||||
this._pattern = pattern
|
||||
} else {
|
||||
pattern = this._pattern
|
||||
}
|
||||
|
||||
if (pattern) {
|
||||
ctx.fillStyle = pattern
|
||||
ctx.fillRect(
|
||||
this.visible_area[0],
|
||||
this.visible_area[1],
|
||||
this.visible_area[2],
|
||||
this.visible_area[3]
|
||||
)
|
||||
ctx.fillStyle = 'transparent'
|
||||
}
|
||||
|
||||
ctx.globalAlpha = 1.0
|
||||
ctx.imageSmoothingEnabled = ctx.imageSmoothingEnabled = true //= ctx.mozImageSmoothingEnabled
|
||||
}
|
||||
|
||||
//groups
|
||||
if (this.graph._groups.length && !this.live_mode) {
|
||||
this.drawGroups(canvas, ctx)
|
||||
}
|
||||
|
||||
if (this.onDrawBackground) {
|
||||
this.onDrawBackground(ctx, this.visible_area)
|
||||
}
|
||||
if (this.onBackgroundRender) {
|
||||
//LEGACY
|
||||
console.error(
|
||||
'WARNING! onBackgroundRender deprecated, now is named onDrawBackground '
|
||||
)
|
||||
this.onBackgroundRender = null
|
||||
}
|
||||
|
||||
//DEBUG: show clipping area
|
||||
//ctx.fillStyle = "red";
|
||||
//ctx.fillRect( this.visible_area[0] + 10, this.visible_area[1] + 10, this.visible_area[2] - 20, this.visible_area[3] - 20);
|
||||
|
||||
//bg
|
||||
if (this.render_canvas_border) {
|
||||
ctx.strokeStyle = '#235'
|
||||
ctx.strokeRect(0, 0, canvas.width, canvas.height)
|
||||
}
|
||||
|
||||
if (this.render_connections_shadows) {
|
||||
ctx.shadowColor = '#000'
|
||||
ctx.shadowOffsetX = 0
|
||||
ctx.shadowOffsetY = 0
|
||||
ctx.shadowBlur = 6
|
||||
} else {
|
||||
ctx.shadowColor = 'rgba(0,0,0,0)'
|
||||
}
|
||||
|
||||
//draw connections
|
||||
if (!this.live_mode) {
|
||||
this.drawConnections(ctx)
|
||||
}
|
||||
|
||||
ctx.shadowColor = 'rgba(0,0,0,0)'
|
||||
|
||||
//restore state
|
||||
ctx.restore()
|
||||
}
|
||||
|
||||
if (ctx.finish) {
|
||||
ctx.finish()
|
||||
}
|
||||
|
||||
this.dirty_bgcanvas = false
|
||||
this.dirty_canvas = true //to force to repaint the front canvas with the bgcanvas
|
||||
}
|
||||
|
||||
function imgToCanvasBase64 (img) {
|
||||
const canvas = document.createElement('canvas')
|
||||
const ctx = canvas.getContext('2d')
|
||||
canvas.width = img.width
|
||||
canvas.height = img.height
|
||||
ctx.drawImage(img, 0, 0)
|
||||
const base64 = canvas.toDataURL('image/png')
|
||||
|
||||
return base64
|
||||
}
|
||||
|
||||
// 使用示例
|
||||
function convertImageToBase64 (img) {
|
||||
// const img = new Image()
|
||||
// img.src = 'path/to/your/image.jpg' // 替换为你的图片路径
|
||||
// console.log('convertImageToBase64',img)
|
||||
try {
|
||||
const base64 = imgToCanvasBase64(img)
|
||||
return base64
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
function getInputsAndOutputs () {
|
||||
const outputs =
|
||||
`PreviewImage,SaveImage,TransparentImage,VHS_VideoCombine,VideoCombine_Adv,Image Save,SaveImageAndMetadata_`.split(
|
||||
','
|
||||
)
|
||||
|
||||
let outputsId = []
|
||||
|
||||
for (let node of app.graph._nodes) {
|
||||
if (outputs.includes(node.type)) {
|
||||
outputsId.push(node.id)
|
||||
}
|
||||
}
|
||||
|
||||
return outputsId
|
||||
}
|
||||
|
||||
function getRandomElement (arr) {
|
||||
const randomIndex = Math.floor(Math.random() * arr.length)
|
||||
return arr[randomIndex]
|
||||
}
|
||||
|
||||
async function getBG () {
|
||||
var outputs = []
|
||||
|
||||
for (let id of app.graph
|
||||
.getNodeById(50)
|
||||
.widgets.filter(w => w.name === 'output_ids')[0]
|
||||
.value.split('\n')) {
|
||||
if (getInputsAndOutputs().map(Number).includes(Number(id))) {
|
||||
if (app.graph.getNodeById(id).imgs && app.graph.getNodeById(id).imgs[0]) {
|
||||
let b = convertImageToBase64(app.graph.getNodeById(id).imgs[0])
|
||||
// console.log(b)
|
||||
outputs.push(b)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var BACKGROUND_IMAGE = getRandomElement(outputs),
|
||||
CLEAR_BACKGROUND_COLOR = 'rgba(0,0,0,0.9)'
|
||||
|
||||
if (!window._bg_img) {
|
||||
window._bg_img = app.canvas._bg_img.src
|
||||
}
|
||||
// let img=new Image();
|
||||
// img.src=BACKGROUND_IMAGE;
|
||||
|
||||
//去掉透明度过度
|
||||
// app.canvas.zoom_modify_alpha=false;
|
||||
//整体透明度
|
||||
app.canvas.editor_alpha = 1.1
|
||||
// app.canvas._pattern=ctx.createPattern(img, "no-repeat");
|
||||
app.canvas.updateBackground(BACKGROUND_IMAGE, CLEAR_BACKGROUND_COLOR)
|
||||
app.canvas.draw(true, true)
|
||||
}
|
||||
|
||||
class BgRunner {
|
||||
constructor () {
|
||||
this.intervalId = null
|
||||
this.running = false
|
||||
}
|
||||
|
||||
// 要运行的方法
|
||||
bg () {
|
||||
console.log('方法bg正在运行')
|
||||
getBG()
|
||||
}
|
||||
|
||||
// 启动bg方法每秒运行一次
|
||||
start () {
|
||||
if (!this.running) {
|
||||
this.intervalId = setInterval(() => this.bg(), 1500)
|
||||
this.running = true
|
||||
}
|
||||
}
|
||||
|
||||
// 停止bg方法的运行
|
||||
stop () {
|
||||
if (this.running) {
|
||||
clearInterval(this.intervalId)
|
||||
this.intervalId = null
|
||||
this.running = false
|
||||
|
||||
if (window._bg_img) {
|
||||
var BACKGROUND_IMAGE = window._bg_img,
|
||||
CLEAR_BACKGROUND_COLOR = 'rgba(0,0,0,1)'
|
||||
app.canvas.editor_alpha = 1
|
||||
|
||||
app.canvas.updateBackground(BACKGROUND_IMAGE, CLEAR_BACKGROUND_COLOR)
|
||||
app.canvas.draw(true, true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 切换start和stop
|
||||
toggle () {
|
||||
if (this.running) {
|
||||
this.stop()
|
||||
} else {
|
||||
this.start()
|
||||
}
|
||||
}
|
||||
|
||||
// 获取运行状态
|
||||
isRunning () {
|
||||
return this.running
|
||||
}
|
||||
}
|
||||
|
||||
// 示例用法
|
||||
// const runner = new BgRunner();
|
||||
// runner.start();
|
||||
// setTimeout(() => runner.stop(), 5000);
|
||||
|
||||
export const td_bg = new BgRunner()
|
||||
Reference in New Issue
Block a user