Aspose.CAD'i Vue'da Nasıl Kullanılır

Ön Koşullar

Vue CLI
Visual Code
Node.js

DGN görüntüsünü PNG’ye çevirin ve tarayıcıda görüntüleyin

Bu örnekte, bir çizimi dönüştüren ve bir resim olarak kaydeden basit bir dönüşüm programı oluşturuyorsunuz.

Vue Projesi Oluşturma

Zaten bir Vue çalışma alanı dizininde olmadığınızdan emin olun.
Yeni bir tane başlatın ve ardından programın adını verin veya Visual Code veya WebStorm gibi diğer programları kullanarak bir proje oluşturun:
```
vue create vue-example
```
npm paketinden Aspose.CAD’i yükleyin
```
npm install aspose-cad
```
Çizimi yükleyip görüntülemek için bir giriş türü dosyası ve img etiketleri oluşturun
```
<input id="file" type="file">
<img id="image" />
```

App.vue’de, yardımcı işlemleri başlatma, işleme ve resmi gösterme sürecini tanımlıyoruz

<script>
import {Drawing, PngOptions} from "aspose-cad";

export default{
  beforeCreate: function () {
    //montaj sürecini başlatmak için gerekli
    let recaptchaScript = document.createElement('script')
    recaptchaScript.setAttribute('src', '/node_modules/aspose-cad/dotnet.js')
    document.head.appendChild(recaptchaScript)

    let dotnet;
  },
  mounted() {
    window.addEventListener('load', this.onWindowLoad)
  },
  methods: {
    async onWindowLoad() {
      
      console.log("WASM yükleniyor...");
      await dotnet.boot();
      console.log("WASM yüklendi");

      document.querySelector('input').addEventListener('change', function() {
            const reader = new FileReader();
            reader.onload = function() {

              let arrayBuffer = this.result;
              let array = new Uint8Array(arrayBuffer);

              // YÜKLE
              let file = Image.load(array);
              console.log(file);

              // KAYDET
              let exportedFilePromise = Image.save(array, new PngOptions());
              exportedFilePromise.then(exportedFile => {
                console.log(exportedFile);

                let urlCreator = window.URL || window.webkitURL;
                let blob = new Blob([exportedFile], { type: 'application/octet-stream' });
                let imageUrl = urlCreator.createObjectURL(blob);
                document.querySelector("#image").src = imageUrl;
              });
            }

            reader.readAsArrayBuffer(this.files[0]);
          },
          false);
    },
  },
}
</script>

<template>
  <header>
    <img alt="Vue logosu" class="logo" src="./assets/logo.svg" width="125" height="125" />
    <p>Vue için aspose.cad örneği.</p>
  </header>

  <main>
    <input id="file" type="file">
    <br/>
    <img id="image" />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}
main{
  text-align: center;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }


  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

Uygulamayı başlatın
```
npm run dev
```

Uygulama örneği

Dosya seçin.
Herhangi bir DXF, DWG, DGN, DWF, DWFX, IFC, STL, DWT, IGES, PLT, CF2, OBJ, HPGL, IGS, PCL, FBX, PDF, SVG dosyasını seçin.
Yanıt başarılıysa, dosya ekranda görüntülenecek ve indirilmesi teklif edilecektir.

Ayrıca Bakınız

Aspose.CAD'i TypeScript'te Nasıl Kullanılır