Question

有没有办法添加，例如使用konva.js将圆圈或框放到html5画布上？我尝试过，但不知怎的，它不起作用！我想要它，例如单击即可添加拖放循环，双击可删除圆圈。

Answer 1

这是它的工作原理，也许有人可以使用它！

＆＃13;

$( document ).ready(function() {

        var width = window.innerWidth;
        var height = window.innerHeight;

        var stage = new Konva.Stage({
            container: 'container',
            width: width,
            height: height
        });

        var layer = new Konva.Layer();

        var colors = ["red", "orange", "yellow", "green", "blue", "purple"];


        var rect1 = new Konva.Rect({
            x: 25,
            y: 25,
            width: width-50,
            height: height-50,
            opacity: 1,
            fill: 'green',
            stroke: 'black',
            strokeWidth: 2
        });


        var circle = new Konva.Circle({
            x: 230,
            y: 100,
            radius: 30,
            fill: 'grey',
            stroke: 'black',
            strokeWidth: 1,
            draggable: true,
            id: 'Origin'
        });


        circle.on('mouseover', function() {
            document.body.style.cursor = 'pointer';
        });
        circle.on('mouseout', function() {
            document.body.style.cursor = 'default';
        });

        circle.on("dragstart", function () {
                this.moveToTop();
                layer.draw();
            });

        circle.on("dragmove", function () {
                document.body.style.cursor = "pointer";
            });

			
        circle.on("dblclick dbltap", function (evt) {
            evt.cancelBubble = true;
            console.log("item dblclick");
                this.destroy();
                layer.draw();
            });




        circle.on("click tap", function (evt) {
            evt.cancelBubble = true;

            var node = evt.target;
            if (node) {
                // update tooltip
                var mousePos = node.getStage().getPointerPosition();

                console.log("item normal click " + node.getId() + " > node-x" + node.x() +"  - fill " + node.getFill());
            }


        });
		
		rect1.on('dblclick', function() {
            var clone;

            clone = circle.clone({
                x:stage.getPointerPosition().x,
                y:stage.getPointerPosition().y,
                id: 'myCircle'

            });


            layer.add(clone);

            layer.draw();
            console.log('content click on rect1 ' + JSON.stringify(stage.getPointerPosition()));
        });

        circle.on("mouseover", function () {
                document.body.style.cursor = "pointer";
            });
        circle.on("mouseout", function () {
                document.body.style.cursor = "default";
            });

        layer.add(rect1);
        layer.add(circle);



		stage.add(layer);






    });

＆＃13;

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
<script
        src="https://code.jquery.com/jquery-3.2.1.min.js"></script>



<meta charset="utf-8">
<title>Add/Remove</title>
<style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #F0F0F0;
    }
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>

＆＃13;

将项目添加到画布Konvajs

1 个答案: