SolidJS-每日小知识（9/18）

知识介绍

1. 给图片添加旋转功能并自适应容器的宽和高

代码分析

1 给图片添加旋转功能并自适应容器的宽和高

1. 定义信号量

    const [imgRotation,setImgRotation] = createSignal(0);
    const [isLandscape, setIsLandscape] = createSignal(true);

2. 设置旋转函数

    const rotateImage = () => {
        setImgRotation((prev) => (prev + 90) % 360);
        setIsLandscape((prev) => !prev);
    };

3. 创建一个effect，当图片加载完成后，更新图片的宽和高

    createEffect(() => {
        const img = document.querySelector('.image-view img') as HTMLImageElement;
        if (img) {
            console.log(img.width,img.height);
            img.onload = () => {
                setIsLandscape(img.naturalWidth > img.naturalHeight);
            };
        }
    });

4. 创建img元素和旋转按钮

<div class='tool-view'>
    <div class='image-view'>
        <img 
            src="./src/assets/creatives/page_1_highres.jpg" 
            alt="Your Image" 
            style={{
                "height": isLandscape() ? '600px' : '424px',
                "transform": `rotate(${imgRotation()}deg)`,
            }}
        />
    </div>
    <button onClick={rotateImage} class="rotate-button">旋转图片</button>
</div>