如何獲取 CreateJS 形狀的鼠標懸停目標的 X&Y

Question

我正在嘗試在鼠標懸停和鼠標移出時更改形狀的填充顏色。 我見過的大多數示例都使用事件 StageX 和 StageY 坐標。 但是，這些坐標是事件發生時鼠標的 X 和 Y 位置。 這迫使 object 在“重繪”時突然移動。

其他示例要求您調用“GetBounds”...這不適用於 Shape 對象。

• 我不希望 object 移動只是因為我正在更改 FillColor
• 我在 EVENT.TARGET 中看不到任何類似頂部/左側的東西

問：如何計算或檢索形狀的當前 X/Y（上/左）坐標？

HTML & JAVASCRIPT：

<style>
    .dashboard { height:600px; }
    .dashboard header { }

    .dashboard aside { vertical-align:top; display:inline-block; }
    .dashboard aside.control-bar { border: solid 1px black; border-radius: 3px; padding: 5px; height: 100%; width:10%; margin-right: 5px; }

    .dashboard aside.control-bar {}
    .dashboard aside.control-bar .btn { width:95%; }

    .dashboard section { vertical-align:top; display:inline-block; }
    .dashboard section.desktop { height:100%; min-width:80%; border:solid 1px black; border-radius: 3px; }
    .dashboard section.desktop canvas { height:98%; width:99%; }

    .dashboard footer { margin-top:5px; padding:5px; }
</style>

<div class="row">
    <div class="col-md-12">
        <main role="main" class="dashboard pb-3">
            <header qwik-control="header">
                <h3>Dashboard</h3>
            </header>
            <aside class="control-bar">
                <center>
                    <h6>UI Controls</h6>
                    <a id="btnCreateNode" class="btn btn-sm btn-dark">Create Node</a>
                </center>
            </aside>
            <section class="desktop">
                <canvas id="demoCanvas"></canvas>
            </section>
            <footer>
                <center>
                    <h5 style="color:#C7C9CD;">Button Controls</h5>
                </center>
            </footer>
        </main>
    </div>
</div>

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script type="text/javascript">

    var stage = null,
        loader = null;

    // GLOBALS
    var _PROPERTIES = { node: { y: 100, x: 200, fillColor: '#F9FAFB', fillOverColor: '#FCFCC2', strokeColor: '#000' } };

    function node_create(){
        console.log('node_create');

        var top = Math.random() * 500;
        var left = Math.random() * 500;
        var width = _PROPERTIES.node.x;
        var height = _PROPERTIES.node.y;

        // Create
        var node = new createjs.Shape();
        node.graphics.beginStroke(_PROPERTIES.node.strokeColor);
        node.graphics.beginFill(_PROPERTIES.node.fillColor);
        node.graphics.setStrokeStyle(1);
        node.snapToPixel = true;
        node.graphics.drawRect(left, top, width, height);
        node.graphics.endFill();
        node.name = name;

        node.overColor = _PROPERTIES.node.fillOverColor;
        node.outColor = _PROPERTIES.node.fillColor;

        // Events
        node.on("mouseover", node_mouseover);
        node.on("mouseout", node_mouseout);

        // Display
        stage.addChild(node);
        stage.update();
    };

    function node_mouseover(evt) {
        console.log('node_mouseover');

        // COORDS is the events coordinates...not the targets Top/Left (e.g. cursor)
        // How do I get the X/Y of the target? (getBounds does not exist for Shapes)
        var target = evt.target;
        var coords = { x: evt.stageX, y: evt.stageY };

        target.graphics.clear();
        target.graphics.beginStroke(_PROPERTIES.node.strokeColor);
        target.graphics.beginFill(target.overColor);
        target.graphics.drawRect(coords.x, coords.y, _PROPERTIES.node.x, _PROPERTIES.node.y);
        target.graphics.endFill();
        stage.update();
    };

    function node_mouseout(evt) {
        console.log('node_mouseout');

        // COORDS is the events coordinates...not the targets Top/Left (e.g. cursor)
        // How do I get the X/Y of the target? (getBounds does not exist for Shapes)
        var target = evt.target;
        var coords = { x: evt.stageX, y: evt.stageY };

        target.graphics.clear();
        target.graphics.beginStroke(_PROPERTIES.node.strokeColor);
        target.graphics.beginFill(target.outColor);
        target.graphics.drawRect(coords.x, coords.y, _PROPERTIES.node.x, _PROPERTIES.node.y);
        target.graphics.endFill();
        stage.update();
    };

    $(document).ready(function () {

        // Stage
        stage = new createjs.Stage('demoCanvas');
        stage.canvas.width = window.innerWidth;
        stage.canvas.height = window.innerHeight;
        
        // Stage - Events
        stage.enableMouseOver(10);

        // Queue
        loader = new createjs.LoadQueue();

        // DOM - EVENTS
        $('#btnCreateNode').on('click', function(e){
            node_create();
        });
    });
</script>

Answer 1

解決方案是將您的形狀放入容器中。 形狀在確定其他對象的位置時沒有相同的屬性和方法：如圖像或位圖等。

因此......容器是解決這個問題的“解決方案”。

JAVASCRIPT：

var _PROPERTIES = { node: { y: 100, x: 200, fillColor: '#F9FAFB', fillOverColor: '#FCFCC2', strokeColor: '#000' } };

function node_create(){
    console.log('node_create');

    var top = Math.random() * 500;
    var left = Math.random() * 500;
    var width = _PROPERTIES.node.x;
    var height = _PROPERTIES.node.y;

    // Create
    var node = new createjs.Shape();
    node.graphics.beginStroke(_PROPERTIES.node.strokeColor);
    node.graphics.beginFill(_PROPERTIES.node.fillColor);
    node.graphics.setStrokeStyle(1);
    node.snapToPixel = true;
    node.graphics.drawRect(0, 0, width, height); //<-- changed
    node.graphics.endFill();
    node.name = name;

    node.overColor = _PROPERTIES.node.fillOverColor; //<-- added
    node.outColor = _PROPERTIES.node.fillColor; //<-- added

    // Events
    node.on("mouseover", node_mouseover);
    node.on("mouseout", node_mouseout);

    // Container
    var container = new createjs.Container(); //<-- added
    container.x = top;
    container.y = left;
    container.addChild(node);

    // Display
    stage.addChild(container); //<-- changed
    stage.update();
};

function node_mouseover(evt) {
    console.log('node_mouseover');

    // Because of the container...you no longer need to calculate a TOP or LEFT
    var target = evt.target;
    target.graphics.clear();
    target.graphics.beginStroke(_PROPERTIES.node.strokeColor);
    target.graphics.beginFill(target.overColor);
    target.graphics.drawRect(0, 0, _PROPERTIES.node.x, _PROPERTIES.node.y); //<-- changed
    target.graphics.endFill();
    stage.update();
};

function node_mouseout(evt) {
    console.log('node_mouseout');

    // Because of the container...you no longer need to calculate a TOP or LEFT
    var target = evt.target;
    target.graphics.clear();
    target.graphics.beginStroke(_PROPERTIES.node.strokeColor);
    target.graphics.beginFill(target.outColor);
    target.graphics.drawRect(0, 0, _PROPERTIES.node.x, _PROPERTIES.node.y); //<-- changed
    target.graphics.endFill();
    stage.update();
};