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