From ab5084328d5a9546e535b1b0d3ff2366204e35cb Mon Sep 17 00:00:00 2001 From: ienaga Date: Tue, 16 Jul 2024 00:33:43 +0900 Subject: [PATCH] =?UTF-8?q?#147=20feat:=20=E3=83=9E=E3=82=B9=E3=82=AF?= =?UTF-8?q?=E6=8F=8F=E7=94=BB=E3=81=AE=E5=AE=9F=E8=A3=85(WIP)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/BitmapDisplayObjectComponent.ts | 6 +- ...BitmapCreateDisplayObjectElementUseCase.ts | 6 +- .../MovieClipDisplayObjectComponent.ts | 6 +- ...ieClipCreateDisplayObjectElementUseCase.ts | 6 +- .../component/ShapeDisplayObjectComponent.ts | 6 +- .../ShapeCreateDisplayObjectElementUseCase.ts | 6 +- .../ScreenDisplayObjectGetMaskStyleService.ts | 76 +++++++++++++++++++ 7 files changed, 103 insertions(+), 9 deletions(-) create mode 100644 src/js/screen/application/DisplayObject/service/ScreenDisplayObjectGetMaskStyleService.ts diff --git a/src/js/core/application/Bitmap/component/BitmapDisplayObjectComponent.ts b/src/js/core/application/Bitmap/component/BitmapDisplayObjectComponent.ts index 98ad416f..464685f0 100644 --- a/src/js/core/application/Bitmap/component/BitmapDisplayObjectComponent.ts +++ b/src/js/core/application/Bitmap/component/BitmapDisplayObjectComponent.ts @@ -9,13 +9,15 @@ import { $getCurrentWorkSpace } from "../../CoreUtil"; * * @params {Character} character * @params {number} layer_id + * @params {string} [mask_style=""] * @return {string} * @method * @public */ export const execute = ( character: Character, - layer_id: number + layer_id: number, + mask_style: string = "" ): string => { // 変形スタイルを生成 @@ -28,6 +30,6 @@ export const execute = ( const depth = character.depth; return ` -
+
`; }; \ No newline at end of file diff --git a/src/js/core/application/Bitmap/usecase/BitmapCreateDisplayObjectElementUseCase.ts b/src/js/core/application/Bitmap/usecase/BitmapCreateDisplayObjectElementUseCase.ts index 80398ce3..d5f3b437 100644 --- a/src/js/core/application/Bitmap/usecase/BitmapCreateDisplayObjectElementUseCase.ts +++ b/src/js/core/application/Bitmap/usecase/BitmapCreateDisplayObjectElementUseCase.ts @@ -12,6 +12,7 @@ import { execute as instanceUpdateBlendModeService } from "@/core/application/In import { execute as screenAreaHierarchyAdjustmentService } from "@/screen/application/ScreenArea/service/ScreenAreaHierarchyAdjustmentService"; import { $getDeactivated, $getReDrawState } from "@/screen/application/ScreenArea/ScreenAreaUtil"; import { execute as screenAreaReadOnlyElementService } from "@/screen/application/ScreenArea/service/ScreenAreaReadOnlyElementService"; +import { execute as screenDisplayObjectGetMaskStyleService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectGetMaskStyleService"; /** * @description Bitmapをcanvasに描画して返却する @@ -48,9 +49,12 @@ export const execute = async ( // ブレンドモードを設定 instanceUpdateBlendModeService(canvas, character.blendMode); + // マスクのスタイルを取得 + const maskStyle = await screenDisplayObjectGetMaskStyleService(character, layer); + // ステージに追加 element.insertAdjacentHTML("beforeend", - bitmapDisplayObjectComponent(character, layer.id) + bitmapDisplayObjectComponent(character, layer.id, maskStyle) ); const div = element.lastElementChild as HTMLDivElement; diff --git a/src/js/core/application/MovieClip/component/MovieClipDisplayObjectComponent.ts b/src/js/core/application/MovieClip/component/MovieClipDisplayObjectComponent.ts index b366c0a1..03daca92 100644 --- a/src/js/core/application/MovieClip/component/MovieClipDisplayObjectComponent.ts +++ b/src/js/core/application/MovieClip/component/MovieClipDisplayObjectComponent.ts @@ -9,13 +9,15 @@ import { $createTransformStyle } from "@/controller/application/TransformSetting * * @params {Character} character * @params {number} layer_id + * @params {string} [mask_style=""] * @return {string} * @method * @public */ export const execute = ( character: Character, - layer_id: number + layer_id: number, + mask_style: string = "" ): string => { // 変形スタイルを生成 @@ -28,6 +30,6 @@ export const execute = ( const depth = character.depth; return ` -
+
`; }; \ No newline at end of file diff --git a/src/js/core/application/MovieClip/usecase/MovieClipCreateDisplayObjectElementUseCase.ts b/src/js/core/application/MovieClip/usecase/MovieClipCreateDisplayObjectElementUseCase.ts index 315562eb..92b039b1 100644 --- a/src/js/core/application/MovieClip/usecase/MovieClipCreateDisplayObjectElementUseCase.ts +++ b/src/js/core/application/MovieClip/usecase/MovieClipCreateDisplayObjectElementUseCase.ts @@ -9,6 +9,7 @@ import { execute as instanceUpdateBlendModeService } from "@/core/application/In import { execute as screenAreaHierarchyAdjustmentService } from "@/screen/application/ScreenArea/service/ScreenAreaHierarchyAdjustmentService"; import { $getDeactivated, $getReDrawState } from "@/screen/application/ScreenArea/ScreenAreaUtil"; import { execute as screenAreaReadOnlyElementService } from "@/screen/application/ScreenArea/service/ScreenAreaReadOnlyElementService"; +import { execute as screenDisplayObjectGetMaskStyleService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectGetMaskStyleService"; /** * @description MovieClipをcanvasに描画して返却する @@ -45,9 +46,12 @@ export const execute = async ( // ブレンドモードを設定 instanceUpdateBlendModeService(canvas, character.blendMode); + // マスクのスタイルを取得 + const maskStyle = await screenDisplayObjectGetMaskStyleService(character, layer); + // ステージに追加 element.insertAdjacentHTML("beforeend", - movieClipDisplayObjectComponent(character, layer.id) + movieClipDisplayObjectComponent(character, layer.id, maskStyle) ); const div = element.lastElementChild as HTMLDivElement; diff --git a/src/js/core/application/Shape/component/ShapeDisplayObjectComponent.ts b/src/js/core/application/Shape/component/ShapeDisplayObjectComponent.ts index b366c0a1..03daca92 100644 --- a/src/js/core/application/Shape/component/ShapeDisplayObjectComponent.ts +++ b/src/js/core/application/Shape/component/ShapeDisplayObjectComponent.ts @@ -9,13 +9,15 @@ import { $createTransformStyle } from "@/controller/application/TransformSetting * * @params {Character} character * @params {number} layer_id + * @params {string} [mask_style=""] * @return {string} * @method * @public */ export const execute = ( character: Character, - layer_id: number + layer_id: number, + mask_style: string = "" ): string => { // 変形スタイルを生成 @@ -28,6 +30,6 @@ export const execute = ( const depth = character.depth; return ` -
+
`; }; \ No newline at end of file diff --git a/src/js/core/application/Shape/usecase/ShapeCreateDisplayObjectElementUseCase.ts b/src/js/core/application/Shape/usecase/ShapeCreateDisplayObjectElementUseCase.ts index f5e6c52f..9a896bce 100644 --- a/src/js/core/application/Shape/usecase/ShapeCreateDisplayObjectElementUseCase.ts +++ b/src/js/core/application/Shape/usecase/ShapeCreateDisplayObjectElementUseCase.ts @@ -9,6 +9,7 @@ import { execute as screenAreaHierarchyAdjustmentService } from "@/screen/applic import { execute as screenAreaReadOnlyElementService } from "@/screen/application/ScreenArea/service/ScreenAreaReadOnlyElementService"; import { execute as instanceUpdateBlendModeService } from "@/core/application/Instance/service/InstanceUpdateBlendModeService"; import { $getDeactivated, $getReDrawState } from "@/screen/application/ScreenArea/ScreenAreaUtil"; +import { execute as screenDisplayObjectGetMaskStyleService } from "@/screen/application/DisplayObject/service/ScreenDisplayObjectGetMaskStyleService"; /** * @description Shapeをcanvasに描画して返却する @@ -45,9 +46,12 @@ export const execute = async ( // ブレンドモードを設定 instanceUpdateBlendModeService(canvas, character.blendMode); + // マスクのスタイルを取得 + const maskStyle = await screenDisplayObjectGetMaskStyleService(character, layer); + // ステージに追加 element.insertAdjacentHTML("beforeend", - shapeDisplayObjectComponent(character, layer.id) + shapeDisplayObjectComponent(character, layer.id, maskStyle) ); const div = element.lastElementChild as HTMLDivElement; diff --git a/src/js/screen/application/DisplayObject/service/ScreenDisplayObjectGetMaskStyleService.ts b/src/js/screen/application/DisplayObject/service/ScreenDisplayObjectGetMaskStyleService.ts new file mode 100644 index 00000000..a8ea5abd --- /dev/null +++ b/src/js/screen/application/DisplayObject/service/ScreenDisplayObjectGetMaskStyleService.ts @@ -0,0 +1,76 @@ +import { $getCacheCanvas } from "@/cache/CacheUtil"; +import { $getCurrentWorkSpace } from "@/core/application/CoreUtil"; +import type { Character } from "@/core/domain/model/Character"; +import type { Layer } from "@/core/domain/model/Layer"; + +/** + * @description マスクスタイルを取得 + * Get mask style + * + * @param {Character} character + * @param {Layer} layer + * @return {Promise} + * @method + * @public + */ +export const execute = async (character: Character, layer: Layer): Promise => +{ + if (layer.parentId === -1) { + return ""; + } + + console.log(character); + const workSpace = $getCurrentWorkSpace(); + const movieClip = workSpace.scene; + + const maskLayer = movieClip.getLayerById(layer.parentId); + if (!maskLayer || !maskLayer.lock) { + return ""; + } + + const activeCharacters = maskLayer.getActiveCharacters(movieClip.currentFrame); + if (!activeCharacters.length) { + return ""; + } + + const maskCharacter = activeCharacters[0]; + if (!maskCharacter) { + return ""; + } + + const instance = workSpace.getLibrary(maskCharacter.libraryId); + if (!instance) { + return ""; + } + + const cacheKey = maskCharacter.cacheKey; + + let canvas = $getCacheCanvas(workSpace.id, instance.id, cacheKey); + if (!canvas) { + canvas = await instance.getHTMLElement(); + if (!canvas) { + return ""; + } + + // キャッシュに保存 + // $setCacheCanvas(workSpace.id, instance.id, cacheKey, canvas); + } + + const base64 = canvas.toDataURL(); + const scale = window.devicePixelRatio; + const width = canvas.width / scale; + const height = canvas.height / scale; + + // マスク用のスタイルを生成 + let maskStyle = ""; + maskStyle += `mask: url(${base64}), none;`; + maskStyle += `-webkit-mask: url(${base64}), none;`; + maskStyle += `mask-size: ${width}px ${height}px;`; + maskStyle += `-webkit-mask-size: ${width}px ${height}px;`; + maskStyle += "mask-repeat: no-repeat;"; + maskStyle += "-webkit-mask-repeat: no-repeat;"; + maskStyle += `mask-position: ${0}px ${0}px;`; + maskStyle += `-webkit-mask-position: ${0}px ${0}px;`; + + return maskStyle; +}; \ No newline at end of file