Question

图片

我们可以先通过调用 mxcad 实例化对象中的 loadImage() 方法来加载一个外部图片到当前上下文，再调用 drawImage() 方法来绘制目标图片。

点击 loadImage()、drawImage() 查看详细属性和方法说明。

import { MxCpp, MxCADUiPrPoint } from "mxcad"

// 绘图片函数
async function Mx_Test_DrawImage() {
  const getPoint = new MxCADUiPrPoint();
  getPoint.setMessage("\n指定插入点:");
  let pt = await getPoint.go();
  if (!pt) return;

  let mxcad = MxCpp.getCurrentMxCAD();
  let imagUrl = "http://www.wenjiangs.com/wp-content/uploads/2024/docimg5/225-2czfdjz2mbx.jpg";

  mxcad.loadImage(imagUrl,(image)=>{
    if(!image ){ 
      console.log("loadImage failed");
      return;
    }
    let width = mxcad.mxdraw.viewCoordLong2Cad(100);
    let height  = (image.height /  image.width) * width;
    mxcad.drawImage((pt as any).x,(pt as any).y,width,height,0,imagUrl);
    mxcad.updateDisplay();
  });
}

:::demo

import { MxFun } from "mxdraw"
import {  McObject, MxCADUiPrPoint } from "mxcad"

export default () => {
    const mxcad = new McObject()
    mxcad.create({
      canvas: "#myCanvas",
      locateFile: (fileName: string)=> {
            // CDN 加载必须使用wasm/2d-st中的资源、因为github的限制无法使用wasm/2d 资源
            // 需要使用wasm/2d需要遵循浏览器同源策略或使用其他手段规避浏览器同源策略
            return "https://unpkg.com/mxcad/dist/wasm/2d-st/" + fileName
      },
      // 加载字体的目录位置
      fontspath: self.location.origin + "/mxcad_docs/fonts",
      // 加载转换后的图纸文件
      fileUrl: self.location.origin + "/mxcad_docs/test.mxweb",
    })
    // 绘图片函数
    async function Mx_Test_DrawImage() {
    const getPoint = new MxCADUiPrPoint();
    getPoint.setMessage("\n指定插入点:");
    let pt = await getPoint.go();
    if (!pt) return;

    let imagUrl = "http://www.wenjiangs.com/wp-content/uploads/2024/docimg5/225-2czfdjz2mbx.jpg";
    mxcad.loadImage(imagUrl,(image)=>{
        if(!image ){ 
        console.log("loadImage failed");
        return;
        }
        let width = mxcad.mxdraw.viewCoordLong2Cad(100);
        let height  = (image.height /  image.width) * width;
        mxcad.drawImage((pt as any).x,(pt as any).y,width,height,0,imagUrl);
        mxcad.updateDisplay();
    });
    }
    return (<div style="height: 500px; overflow: hidden;">
      <button style="height:30px;border:1px solid #ccc;padding:0px 5px;margin-bottom:10px"
      id="myBtn" onClick={()=>Mx_Test_DrawImage()}>绘制图片</button>
      <div style="height: 400px;"><canvas id="myCanvas" style="height: 300px"></canvas></div>
    </div>)
}

:::