javascript - KineticJS:setFill 不起作用-6ren

javascript - KineticJS:setFill 不起作用

转载作者：行者123 更新时间：2023-11-28 09:27:35

26

4

要点如下:我有一个 getColor 方法和一个 setColor 方法。

getColor 将全局指针 color_obj 更新为当前对象。
setColor 使用该指针来更改对象的颜色。

问题是，它只将其绘制为黑色。

这是 fiddle :http://jsfiddle.net/EbvH7/3/

和来源 - html:

<html>
<!--- Click the square box to get its color. 
    Then change the color and hit set.
    For some reason it draws the color black only....   -->

<head>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/v4.2.0/kinetic-v4.2.0.min.js"></script>
<script src="http://jscolor.com/jscolor/jscolor.js"></script>

<script>
var stage;                              //canvas
var layer_frame = new Kinetic.Layer();  //Blue frame holder
var color_obj;     //global pointer to object to be colored. 

function getColor(obj) {
    color_obj = obj;    //set global pointer

    var fill = '"'+color_obj.getFill()+'"';
    var name = color_obj.getName();

    document.getElementById('color_pick').color.fromString(fill);
    document.getElementById('colorname_obj').innerHTML = name;

}

function setColor(){
    //Use global pointer
    var fill = document.getElementById('color_pick').color;
    var name = document.getElementById('colorname_obj').innerHTML;


    color_obj.setFill('"'+fill+'"'); 
    color_obj.setName(name);

    stage.draw()
}    


function setup() {
    stage = new Kinetic.Stage({
        container: 'container',
        width: 400, height: 400
    });

    var frame_area = new Kinetic.Rect({
        x: 100, y: 100, opacity: 1,
        width: 30, height: 30,
        fill: 'a7cccb', stroke: 'black', strokeWidth: 2,
        name: 'blue_box'
    });

    frame_area.on('click', function() {
        getColor(this)
    });


    // add the layer to the stage
    layer_frame.add(frame_area);
    stage.add(layer_frame);

    stage.draw();    

};


</script>
</head>

<body onload="setup()">
<!--Canvas--->
<div id="container"></div>

<!--Panels-->
<div id="panel_left">
<!--- C O L O R   B O X -->
    <div id="colorbox">
        <h7 id="colorname_obj" >None</h7><br/>
        <input class="color" id="color_pick" style="width:50%" value="000000" >
        <input type="button" id="color_set" value="Set" onclick="setColor()" >
    </div>
</div>
</body>
</html>

和CSS:

#panel_left {
   position:absolute;
   top:30px; left:30px;
   width:100px; background-color:red;
}

#container {
    position:absolute;
    top:30px; left:130px;
    background-color:blue;
    width:50%; height:50%;    
}

最佳答案

此外，4.3.0 中的新增功能

Kinetic.Text 形状发生重大变化。矩形组件已被删除以简化 API。 textFill 现在是填充，textStroke 现在是描边，textStrokeWidth 现在是描边宽度，textShadow 现在是阴影。如果您想在文本后面有一个矩形，则需要使用 Kinetic.Rect 形状对文本进行分组。文本 fontSize 单位现在以像素为单位(以前以点为单位)。 lineHeight attr 现在默认为 1(过去默认为 1.2)。

关于javascript - KineticJS:setFill 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14144630/

26

4

0

文章推荐： jquery - 圆形或圆形 Draggable/Droppables

文章推荐： CSS 图像不加载 404 页面

文章推荐： html - Angularjs 重复不显示空间

kineticjs - KineticJS 可以采用什么类型的颜色？
似乎缺乏关于 KineticJS 中 Color 是什么的文档(如果我错了，请告诉我) 到目前为止，我通过反复试验发现，我实际上可以将以下内容传递给 setFill 类中的 Shape 之类的函数:
kineticjs - 如何应用 KineticJS 过滤器？
我发现 KineticJS 过滤器文档非常令人沮丧，无法在网上找到示例，尤其是考虑到亮度。 kinetic.filters 文档 link提及 Kinetic.Filters.Brighten(ima
kineticjs - 在 KineticJS 中使用变换矩阵
我有一个用 Box2Dweb 模拟的 body 和一个附着在 body 上的图像。我想采用 body 变换矩阵并将变换应用于图像(用变换绘制图像)，使其在屏幕上的位置和方向(相对)与 body 的位置
kineticjs - 如何使用 KineticJS 绘制动画 gif
我需要用 KineticJS 绘制动画 gif，但是，当我按照 image tutorial 时，我失败了.有什么方法可以画gif动画吗？最佳答案使用 KineticJS Sprite。动画 G
kineticjs - 有没有办法在 Kinetic.Text (KineticJS) 中设置字体粗细？
有没有办法在 KineticJS 的 Text 对象中设置字体粗细？这里是示例代码: var myText = new Kinetic.Text( { x: 350, y:
javascript - 使用 mousemove 绘制形状，使用 kineticjs 拖放和调整大小- KineticJS
我正在使用 KineticJS 开发一个简单的绘画程序。我要实现的是用鼠标移动绘制一个矩形、直线或圆形，绘制的形状可以通过鼠标拖动或调整大小。我的问题是，我必须使用 mousedown 和 mouse
javascript - KineticJS:如何将 SVG Sprite 与 KineticJS Sprite 一起使用？
我有一个 SVG Sprite ，其架构如下: Image Image Image Image Image Image Image Image Image 其中 Image 是图像，所有九个图像都
KineticJS:根据百分比设置宽度
我正在尝试 KineticJS 并查看此示例: var stage = new Kinetic.Stage({ container: 'container', width: 500, he
kineticjs - 不同浏览器上帧速率数的差异
突然，一个简单的动画在 Chrome(大约 30fps)和 firefox(大约 7fps)中具有不同的帧速率。这是正确的行为吗？我可以在动画函数中调整 framRate 吗？最佳答案试试这个 /
kineticjs - 如何从组中完全删除一个矩形？
我想实现一个函数，它将一个组和一个矩形作为参数，并检查该矩形是否属于该组。如果它属于组，我想从组和图层中完全删除该矩形。我尝试了 group.remove() 和 group.getChildren(
KineticJS:没有形状的阴影？
在 KinectJS ，如何创建阴影(即边缘模糊的半透明形状)而不绘制“转换”它的形状？一开始我以为可以让形状投下阴影，但将形状本身的不透明度设置为零。像这样: var rect = new Kin
resize - Kineticjs 如何在舞台上居中图像并根据浏览器调整大小
我正在向舞台添加一个图像作为背景图像和一个矩形。如何确保矩形在舞台上居中并且背景会根据浏览器调整大小？ var stage = new Kinetic.Stage({ container: 'c
image - KineticJS 鼠标悬停在图像上
我正在尝试更改鼠标悬停在图像上的鼠标指针，这是我的脚本: var sc = new Kinetic.Layer(); var sCirc
canvas - KineticJS - 连续应用多个变换
我正在使用 KineticJS 来允许用户操作他们的图像——裁剪、旋转、缩放、翻转等。当我对图像应用任何变换时，效果很好。但是当我应用第二个变换时，它作用于原始的、未变换的图像，而不是我的新图像。
javascript - Kineticjs:如何使用kineticjs使用钢笔工具？
我想使用使用kineticjs的钢笔工具(如photoshop)，我不知道如何实现这一目标。可不可以？如果可能的话请帮助我找出解决方案。我正在使用kinetic-v5.0.1.min.js和kin
javascript - KineticJs - 将图像合并到另一个图像上
我想知道 Kinetic 中是否有某种方法可以将图像与较低层上的另一个图像合并，从而根据“裁剪”图像的形状创建一种裁剪效果。因此图像必须具有透明背景，这对我来说是困难的主要来源。否则我只会使用关闭拖
javascript - KineticJs 鼠标移动错误
我一直在尝试在 KineticJs 阶段的“mousemove”上返回鼠标位置。我的想法是在舞台对象上添加 jQuery 事件处理程序... 我遇到了一个问题，但是有一个错误...... 未捕获类型错
javascript - KineticJS:如何缓存一组形状？
我想提高 Canvas 对象的移动拖放性能。我有一个包含不同形状(图像、星星、记录...)的组。我想使用缓存来提高拖放或旋转整个组时的性能。这是我创建的 JSFiddle:http://jsfidd
javascript - Kineticjs 复杂图像裁剪
我试图模仿这个 other's Stackoverflow canvas clipping function在 KineticJS 中具有可拖动图像的附加功能，但我无法完成它。 fiddle :htt
javascript - KineticJS:应用过滤器后图像没有描边
使用 KineticJS 5.1.0 我有一个带有描边的 KineticJS 图像。我想对此图像应用滤镜。缓存并应用过滤器后，笔划消失了。 Here is a JSFiddle和我的演示代码: var

首页

博学

6Ren·AI

商城

javascript - KineticJS:setFill 不起作用