如何使用jquery旋钮在单个画布上实现多个拱形？ [英] How to implement multiple arch on single canvas with jquery knob?

问题描述

我指的是jsfiddle以供参考。在这个蓝色拱门用旋钮减少，但其他拱门不使用旋钮。任何人都可以建议任何参考。

I am referring jsfiddle for reference. In this blue arch is reducing with knob but other arch are not working with knob. Can any one please suggest any reference for this.

[画布] [1]

[1]： http://jsfiddle.net/matthias_h/L5auuagc/ 在此处输入代码

推荐答案

正如我在评论中提到的，这是一个堆叠问题。由于旋钮使用帆布，所有的画布都与位置：绝对叠加在一起。因此，最好的一个接收所有事件。

As i mentioned in the comment, this is a stacking problem. Since knob uses canvas, all thee canvases are stacked up with position: absolute. So always the top one receives all the events.

当鼠标在任何画布上移动并获得所有的颜色时，你可以做的是获取鼠标位置画布在那个特定的位置上。如果颜色是透明/没有颜色，则通过设置负 z-index 将画布向下推入堆栈中。如果它有一些颜色然后通过设置正 z-index 将其推入堆栈。

What you can do is get the mouse position when the mouse moves on any of the canvas and get the color of all the canvases on that particular position. If the color is transparent/no color then push the canvas down in the stack by setting a negative z-index. If it has some color then push it up in the stack by setting a positive z-index.

这是代码示例：

HTML

<input class="knob" type="text" value="100" data-angleOffset="120" data-angleArc="120" data-fgColor="red" data-displayInput="false" />
<input class="knob" type="text" value="100" data-angleOffset="0" data-angleArc="120" data-fgColor="green" data-displayInput="false" />
<input class="knob" type="text" value="100" data-angleOffset="240" data-angleArc="120" data-fgColor="blue" data-displayInput="false" />

JS

$(function () {
    $('.knob').knob({});
    $('.knob').parent('div').css('position', 'absolute');

    $('.knob').parent('div').children('canvas').mousemove(function(event) {
        $.each($('.knob').parent('div').children('canvas'), function(key, value) {
            var canvas = value;
            var context = canvas.getContext('2d');

            var position = getElementPosition(canvas);
            var x = event.pageX - position.x;
            var y = event.pageY - position.y;

            var color = context.getImageData(x, y, 1, 1).data;

            if(color[0] == 0 && color[1] == 0 && color[2] == 0) {
                $(canvas).parent('div').css('z-index', '-1');
            }else {
                $(canvas).parent('div').css('z-index', '1');
            }
        });
    });
});

要获得精确的鼠标位置，请使用以下函数在文档上找到canvas元素的位置：

To get the exact mouse position, find the position of the canvas element on the document using the following function:

function getElementPosition(element) {
    var currentLeft = 0;
    var currentTop = 0;

    if(element.offsetParent) {
        do {
            currentLeft += element.offsetLeft;
            currentTop += element.offsetTop;
        }while(element = element.offsetParent);

        return { x: currentLeft, y: currentTop };
    }

    return undefined;
}

这是你的小提琴：

http://jsfiddle.net/k7moorthi/n8nnpyw6/5/

CREDITS：

lwburk ，用于文档中的确切元素位置和画布代码片段中特定点的颜色。

lwburk for exact element position on document and color of a particular point in canvas code snippets.

这篇关于如何使用jquery旋钮在单个画布上实现多个拱形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！