fix: disable all image smoothing

kylehue · Mar 28, 2024 · ba8ecaf · ba8ecaf
1 parent f3253d8
commit ba8ecaf
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 2 deletions.
diff --git a/src/components/material-manager-item.vue b/src/components/material-manager-item.vue
@@ -208,7 +208,9 @@ const isVerticallyFlipped = ref(
 );
 
 async function handleDuplicateMaterial() {
-   const duplicatedMaterial = await projectStore.duplicateMaterial(props.material);
+   const duplicatedMaterial = await projectStore.duplicateMaterial(
+      props.material
+   );
    if (!duplicatedMaterial) return;
    projectStore.saveState(
       "material-duplicate",
@@ -422,3 +424,9 @@ watch(isVerticallyFlipped, () => {
    handleMaterialChangeVerticallyFlipped();
 });
 </script>
+
+<style scoped lang="scss">
+img {
+   image-rendering: pixelated;
+}
+</style>
diff --git a/src/designer/Designer.ts b/src/designer/Designer.ts
@@ -246,6 +246,7 @@ export class Designer {
                      x: tx,
                      y: ty,
                   } = this.getTransformedImageInfo(material);
+                  ctx.imageSmoothingEnabled = false;
                   ctx.drawImage(image, x + tx, y + ty);
                }
                if (this.settingsStore.designerArea.showMatrixId) {

diff --git a/src/panes/material-area/material-item.vue b/src/panes/material-area/material-item.vue
@@ -140,6 +140,7 @@ function handleRightClick(e: MouseEvent) {
 
    img {
       user-select: none !important;
+      image-rendering: pixelated;
    }
 }
 </style>
diff --git a/src/utils/MaterialTexture.ts b/src/utils/MaterialTexture.ts
@@ -57,14 +57,14 @@ export class MaterialTexture {
       this.imageCanvas.width = rotatedWidth;
       this.imageCanvas.height = rotatedHeight;
 
-      this.ctx.imageSmoothingEnabled = false;
       this.ctx.save();
       this.ctx.translate(rotatedWidth / 2, rotatedHeight / 2);
       this.ctx.rotate(angle);
       this.ctx.scale(
          this.isHorizontallyFlipped ? -1 : 1,
          this.isVerticallyFlipped ? -1 : 1
       );
+      this.ctx.imageSmoothingEnabled = false;
       this.ctx.drawImage(
          this.origImageCanvas,
          -origWidth / 2,