绘画板 05——设置图形边框颜色与背景色(喷枪)

边框与背景色

首先,使用了开源的 spectrum.js 作为颜色选择器,
之前以SVG对象保存全局方法与对象,现在通过新定义一个GlobalStatus,存在全局属性,并通过按钮状态判断状态

var GlobalStatus = {
    defaultFontColor:"#0073c6",
    defaultFillColor:"#ececec",
    defaultLineSize:"2",
    isPicked:function(){
        return $("#tool_pick").hasClass("active");
    },
    isPreFilled:function(){
        return $("#tool_fill").hasClass("active");
    },
    getFontColor:function(){
        return $("#font_color").attr("data-color");
    },
    getFillColor:function(){
        return $("#fill_color").attr("data-color");
    },
    getLineSize:function(){
        return this.defaultLineSize;
    },
    getFillOpacity:function(){
        var fillOpacity = "0.0";
        if (this.getFillColor() != this.defaultFillColor) {
            fillOpacity = "1.0";
        }
        return fillOpacity;
    }
}

在首页给默认线条颜色及背景颜色赋值,并设置状态data-color保存颜色值

$("#font_color span").css("background", GlobalStatus.defaultFontColor);
$("#font_color").attr("data-color", GlobalStatus.defaultFontColor);
$("#fill_color span").css("background", GlobalStatus.defaultFillColor);
$("#fill_color").attr("data-color", GlobalStatus.defaultFillColor);

颜色选择器发生变化时,同时变更颜色与data-color属性值

$("#colorPalettes").spectrum({
    flat: true,
    showPaletteOnly: true,
    color: '#0073c6',
    move: function(tinycolor) {
        console.log("color move");
        console.log(tinycolor.toHexString())
        if ($("#fill_color").hasClass("active")) {
            $("#fill_color").attr("data-color", tinycolor.toHexString());
            $("#fill_color span").eq(0).css("background", tinycolor.toHexString());

        } else if ($("#font_color").hasClass("active")) {
            $("#font_color").attr("data-color", tinycolor.toHexString());
            $("#font_color span").eq(0).css("background", tinycolor.toHexString());
        }

    },

    palette: spectrumColors
});

这里有一个取巧的地方,为了让背景颜色透明显示,规定ececec为透明颜色。选择此颜色时,将透明度opacity设置为全透明。

这样做有一个问题,如果用户自定义此颜色,可以将自定义的颜色修改为ececed,不会在视觉上有较大影响。

在绘制元素时,通过GlobalStatus设置元素的边框、颜色、及透明度。已rect为例

function mousedown(event) {
    console.log('rect mousedown');
    drawing = true;
    startPoint = svgDoc.transformPoint(event);
    element = parent.rect(0, 0).fill(GlobalStatus.getFillColor()).style("fill-opacity", GlobalStatus.getFillOpacity()).stroke({
        width: GlobalStatus.getLineSize(),
        color: GlobalStatus.getFontColor()
    });
}

此时,绘制的颜色就会根据设置的颜色及背景色发生变化。

喷枪

在GlobalStatus中增加了isPreFilled()方法,判断喷枪是否被选中。在Element的扩展方法中,监听click事件。
如果为选中喷枪的点击,则修改元素的对应属性值即可。

_ele.on("click", function() {
    if (GlobalStatus.isPreFilled()) {
        if ($("#fill_color").hasClass("active")) {
            _ele.fill(GlobalStatus.getFillColor());
            _ele.style("fill-opacity", GlobalStatus.getFillOpacity());
        } else {
            _ele.style("stroke", GlobalStatus.getFontColor());
        }

    } else if (GlobalStatus.isPicked()) {
        if (!_ele.attr("picked")) {
            _ele.attr("picked", true);
            console.log(_ele.handleBorder);
            _ele.handleBorder = _ele.handleBorder || new HandleBorder(svgDoc);
            _ele.handleBorder.showShade(_ele);
            pickedElementList.push(_ele);
        } else {
            _ele.attr("picked", null);
            _ele.handleBorder && _ele.handleBorder.hideShade(_ele);
            pickedElementList.remove(_ele);
        }
    }
});

这里有一个用户体验的问题,喷枪是同时修改边框色和背景色,还是分别修改?

现在的实现方法为分别修改。用户需要点击线条与背景色,然后再用喷枪工具分别修改元素颜色。

github地址: https://github.com/wangyuheng/painter

DEMO地址: http://painter.crick.wang/