Skip to content
鼓励作者:欢迎打赏犒劳

konva框架

官网:http://konvajs-doc.bluehymn.com/

博客:https://www.cnblogs.com/le220/p/8391194.html

重置画布大小

js
// 函数来更新Stage的宽高
function resizeStage(newWidth, newHeight) {
  stage.width(newWidth);
  stage.height(newHeight);
  stage.batchDraw(); // 重新渲染Stage
}

// 调用resizeStage函数设置新的宽高
resizeStage(800, 600); // 例如设置为800x600像素

重置背景图片

js
function resetBgImg() {
    let  newImageUrl = "https://images.unsplash.com/photo-1729512867577-0bae39b99503?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    // 加载新的图片
    const newImageObj = new Image();
    newImageObj.src = newImageUrl;
    newImageObj.crossOrigin = 'Anonymous' ;
    newImageObj.onload = function() {
        backgroundImage.image(newImageObj);
        // 更新显示
        layer.batchDraw(); // 一次性重绘图层以提高性能
    };
}

stage缩放

js
stage.scale({ x: 1, y: 1 }); 




function getScaleFactor(width, height) {
    const fixedWidth = 500;
    const fixedHeight = 300;

    // 检查入参宽高是否都小于固定宽高
    if (width < fixedWidth && height < fixedHeight) {
        return 1;
    }

    // 计算比例
    const widthScale = fixedWidth / width;
    const heightScale = fixedHeight / height;

    // 返回宽和高的最大比例
    return Math.min(widthScale, heightScale);
}

// 示例使用
console.log(getScaleFactor(1000, 500)); // 输出 0.5
console.log(getScaleFactor(400, 250)); // 输出 1

简单Demo

html
<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Image Demo</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/lxgwwenkaiscreen.css" media="print" onload="this.media='all'">
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f0f0f0;
        }
        #container{
            width: 500px;
            height: 300px;
            background: #4CAF50;
            margin: 200px;
        }
    </style>
</head>
<body>
<input id="slider" type="range" min="0" max="180" step="1" value="20" />
<input id="slider2" type="range" min="0" max="1" step="0.1" value="1" />
<button id="setFont">设置字体</button>
<button id="save">Save as image</button>
<div id="container"></div>

<script>

    var stage = new Konva.Stage({
        container: 'container',
        width: 500,
        height: 300
    });

    var layer = new Konva.Layer();
    var layer2 = new Konva.Layer();
    stage.add(layer);
    stage.add(layer2);



    var slider = document.getElementById('slider');
    var slider2 = document.getElementById('slider2');


    // 加载图像
    const imageObj = new Image();
    imageObj.onload = function() {
        const backgroundImage = new Konva.Image({
            x: 0,
            y: 0,
            opacity: slider2.value, // 设置透明度
            image: imageObj,
            blurRadius: slider.value,
            width: stage.width(),
            height: stage.height(),
        });


        backgroundImage.cache();
        backgroundImage.filters([Konva.Filters.Blur]);


        // 将图像添加到图层
        layer.add(backgroundImage);

        // 绘制图层
        layer.batchDraw();



        slider.oninput = function() {
            backgroundImage.blurRadius(slider.value);
            layer.batchDraw();
        };
        slider2.oninput = function() {
            backgroundImage.opacity(slider2.value);
            layer.batchDraw();
        };
    };

    // 替换为你的图像 URL
    imageObj.crossOrigin = 'Anonymous' ;
    imageObj.src = 'https://cn.bing.com/th?id=OHR.PointReyes_ROW4397514430_UHD.jpg&rf=LaDigue_UHD.jpg&pid=hp&w=3840&h=2160&rs=1&c=4';



    var complexText = new Konva.Text({
        text: "怎么在保持原有的清晰度的情况下将PNG转ICO???",
        fontSize: 30,
        fontFamily: 'LXGW WenKai Screen',
        fill: '#fff', // 文本颜色
        width: stage.width()/2,
        // padding: 20,
        verticalAlign: 'middle', // 设置文本垂直对齐方式
        align: 'center'
    });
    // 获取文本的高度
    const textHeight = complexText.getHeight();
    // 文本居中
    complexText.position({
        x: (stage.width() - complexText.width()) / 2,
        y: (stage.height() - textHeight) / 2
    });
    layer2.add(complexText);
    layer2.draw();

    function downloadURI(uri, name) {
        var link = document.createElement('a');
        link.download = name;
        link.href = uri;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        delete link;
    }
    document.getElementById('save').addEventListener(
        'click',
        function() {
            var dataURL = stage.toDataURL({ pixelRatio: 1 });
            downloadURI(dataURL, 'stage.png');
        },
        false
    );
    document.getElementById('setFont').addEventListener(
        'click',
        function() {
            complexText.fontFamily("Ma Shan Zheng");
            layer2.draw();
        },
        false
    );
</script>
</body>
</html>

如有转载或 CV 的请标注本站原文地址