leaferjs
小程序画布显示问题
`import React, { useEffect, useRef } from "react"; import { Canvas, View } from "@tarojs/components"; import Taro from "@tarojs/taro"; import { Leafer, useCanvas } from "@leafer-ui/miniapp"; import "@leafer-in/export"; import "@leafer-in/view";
function Index(props) { useCanvas("canvas", Taro); // 绑定平台全局变量
const leaferCurrent = useRef(null);
useEffect(() => { leaferCurrent.current = new Leafer({ view: "leafer", type: "viewport", mobile: true, width: 200, height: 200, fill: "#000", });
return () => {
leaferCurrent.current?.destroy();
};
}, []);
function receiveEvent(event) { leaferCurrent.current?.receiveEvent(event); // 需手动接收、传递画布交互事件给leafer }
return ( <View className={"w-screen h-screen relative left-0 top-0"}> <Canvas id="leafer" type={"2d"} onTouchStart={(e) => receiveEvent(e)} onTouchMove={(e) => receiveEvent(e)} onTouchEnd={(e) => receiveEvent(e)} onTouchCancel={(e) => receiveEvent(e)} ></Canvas> </View> ); }
export default Index;`
按道理应该是显示一个黑色的正方形 但显示的是一个长方形 这是bug还是我没操作对
小程序的画布宽高需要在css中指定
感谢 通过css可以设置
现在发现一个问题导出的时候高度和设置的会不一样
leaferCurrent.current
?.export("png", {
size: {
width: 1500,
height: 1000,
},
//fill: "#000000",
// smooth: true,
screenshot: true,
contextSettings: {
alpha: true,
},
})
.then((result) => {
console.log("xxxxxxxxxxxxxxxx", result);
resolve(result.data);
})
.catch((err) => {
reject(err);
[});
[设置]height: 1000会变成999 height: 1000.5会变成1000这是bug还是我哪里没有配置对？