手机上 markdown 编辑器的设计与实现?



    1. 设计

      1. 如何设计,例如在桌面上的 markdown 一般是一个编辑框,一个是预览框。在手机上,是否还要如此,也就是提供一个编辑页面和一个预览页面。

      2. 如果不设计成上诉的传统页面,该如何设计?(编辑页面及时渲染?)

    2. 如何将 markdown 变成可看的富文本。

      有许多同学或许会说,直接找 markdown2html 的库即可。这个确实可行,但是不是每个 markdown2html 支持的 markdown 拓展都一样的,例如表格其实是 markdown 的拓展,数学公式流程图甘特图等都是 markdown 的拓展,所以每个 markdown2html 的库对输入的 markdown 都有不同的 html 输出。

      hoedown 是我使用的一个 markdown2html 的一个库。

    3. 获取到 markdown2html 的 html 文本,用什么来展示 html?

      其实有三个方案。

      1. 直接使用 Text 或者 TextEdit 这些标签,设置 textFormatRichText 即可。但是这些标签对富文本可以,但是渲染出来的效果不尽人意,例如设置 background 是不起作用的。

      2. 网页模块。桌面使用 WebKit,手机使用 QtWebView 这个模块,桌面系统有 WebKitWebEngine 两个方案。但是手机上的 Qt 网页解决方案还不成熟呢。由于 QtWebView 模块提供的接口太少,以至于只能用来展示内容,做不了其他高级交互,可定制性弱了许多。

      3. 使用 QML 控件来渲染 html,听起来有点天马行空,但是未尝不可。使用 markdown2html 获取到的 html 可以使用一些 html 解析库来获取树形结构,就可组织 QML 进行渲染。不过这个工程庞大啊。

      gumbo-parser 是谷歌推出的一个 html5 解析器,可以获取到 html 的结构树。

    欢迎大家就上诉的问题提出建议~


  • 网站研运

    @qyvlik 如果真的要渲染Markdown的话,可以尝试一下Qt Quick的Text、TextEdit、TextArea。当然,还是可以改改Qt的源码,实现自己的一套Markdown的。



  • @jcy手机上 markdown 编辑器的设计与实现? 中说:

    Text、TextEdit、TextArea

    Text、TextEdit、TextArea 这些尝试过了。效果不佳。


  • 网站研运

    @qyvlik Qt是不佳,但是提供了一个思路,只要像Text等一样封装字符处理引擎,还是可以制作出比较满意的markdown编辑器的。



  • @qyvlik 这个脑洞好棒,支持~~


Log in to reply
 

走马观花

最近的回复

  • 在Maya 2018安装了之后,还会出现很多的错误:比如说在脚本编辑器中会出现这个:

    file /usr/autodesk/maya2018/lib/python2.7/site-packages/maya/app/general/mayaMixin.py line 35: libpyside2.so.2.0: cannot open shared object file: No such file or directory, No module named PyQt4.QtCore

    这是因为Maya里面有一个文件叫做mayaMixin.py,判断系统是否有PySide或者是PySide2。不用担心一定要安装PySide。网上有人说遇到了No module named PyQt4.QtCore需要执行下面的操作:

    sudo apt install python-qt4

    但是我查找了mayaMixin.py的35行,发现它是先寻找是否有PySide2,如果没有PySide2才会去找PySide。其实Maya 2018默认带了PySide2,因此我们只需要编写一个运行Maya的脚本,设置好环境变量,就可以让这个问题消除了。所以我果断卸载了python-qt4。

    sudo apt remove python-qt4

    #!/bin/sh export PYTHONPATH=usr/autodesk/maya2018/lib/python2.7/site-packages:$PYTHONPATH export LD_LIBRARY_PATH=/usr/autodesk/maya2018/lib:$LD_LIBRARY_PATH /usr/autodesk/maya2018/bin/maya.bin

    把这个脚本放在桌面上吧。

    read more
  • 最近在研究怎样让USD支持Maya类似的约束功能。目前初步得到了成功。当一开始遇到这个问题的时候,我还是转向了github,问问官方人员有没有相关现成的方案,或者是有没有计划怎么做。不过我在这个issue中得知,官方并没有立即支持Maya的约束,目前只能用到的是ConstraintTarget特性。所以很遗憾地暂时没有办法使用官方的建议了,只能自己做USD的约束了。😞 😱

    不过好在USD的基础设施还比较好,我开始研究USD的约束,希望在USDView中得到类似Maya的效果。在上一篇文章中,我介绍了一种通过Schema生成cpp文件的方法,事实上,大部分基于USD的项目,都是用到了这个方便的方式快速拓展原型,并且在此基础上添加功能。

    不过USDView的功能,变得更加复杂了。我尝试了很多方案。首先参考的是USDView的通知机制。首先在USDView中打开interpreter,然后看到交互式Python界面(虽然还是有点丑):
    interpreter在USDView中

    然后输入下面的脚本,用来测试:

    stage = usdviewApi.stage pipe = stage.GetPrimAtPath( '/pPipe' ) UsdGeom.XformCommonAPI( pipe ).SetTranslate( ( 1, 3, 1 ) )

    这个脚本是用来让名为pPipe的物体移动到世界坐标1, 3, 1中的。但是如果你用Visual Studio 2017调试它,会发现一条比较严谨并且漫长的调用路线:
    XformCommonAPI -> UsdGeomXformOp -> UsdStage -> SdfLayer -> SdfChangeBlock -> Sdf_ChangeManager -> TfNotice -> UsdImagingDelegate

    这里有一个很重要的点,就是在UsdImagingDelegate在TfNotice中注册了一个处理函数_OnUsdObjectsChanged,所以一旦场景的属性更改了,都会触发_OnUsdObjectsChanged函数。所以我根据这个特性,创建了usdRigImaging模块,位置在USD\qtdream\usdImaging\lib\usdRigImaging中。这其中很重要的一个类是UsdRigImagingConstraintAdapter,并且在构造函数注册了TfNotice的回调函数。一旦场景发生变化了,我让约束本身感知被约束的物体,进行同步的更新。当然了,Maya本身是支持多个物体约束一个物体的,并且给出了一个权重的信息。其实约束的算法就是各个约束的加权平均数。因此要通过一个for循环对所有的约束物体计算平移变化,再加权平均,即可得到效果。核心的代码在这里:

    void UsdRigImagingConstraintAdapter::_OnUsdObjectsChanged( UsdNotice::ObjectsChanged const& notice ) { const UsdNotice::ObjectsChanged::PathRange& fields = notice.GetChangedInfoOnlyPaths( ); TF_FOR_ALL( it, _constraints ) { UsdRigConstraint constraint( *it ); std::vector<int> constrainedIndices; VtArray<SdfAssetPath> targets; constraint.GetTargetsAttr( ).Get( &targets ); for ( int i = 0; i < targets.size( ); ++i ) { SdfPath targetPath( targets[i].GetAssetPath( ) ); TF_FOR_ALL( field, fields ) { if ( targetPath == field->GetPrimPath( ) ) { constrainedIndices.push_back( i ); } } } TF_FOR_ALL( constrainedIndex, constrainedIndices ) { _ApplyConstrainEffect( constraint, *constrainedIndex ); } } } void UsdRigImagingConstraintAdapter::_ApplyConstrainEffect( const UsdRigConstraint& constraint, int constrainedIndex ) { const UsdPrim& constraintTarget = _GetConstraintTarget( constraint ); const UsdPrim& target = _GetTargetAtIndex( constraint, constrainedIndex ); UsdTimeCode time = UsdTimeCode::Default( ); UsdGeomXformCommonAPI ctAPI( constraintTarget ); GfVec3d translation( 0, 0, 0 ); target.GetAttribute( TfToken( "xformOp.translate" ) ).Get( &translation ); GfVec3d initialTranslation = _initialTranslationMap[target.GetPrimPath( )]; double weight = _GetWeightAtIndex( constraint, constrainedIndex ); GfVec3d finalTranslation = ( translation - initialTranslation ) * weight; ctAPI.SetTranslate( finalTranslation ); } void UsdRigImagingConstraintAdapter::_PopulateOnConstraint( const UsdPrim& prim ) { UsdStageWeakPtr& stage = prim.GetStage( ); _constraints.push_back( prim ); UsdRigConstraint constraint( prim ); VtArray<SdfAssetPath> targets; constraint.GetTargetsAttr( ).Get( &targets ); TF_FOR_ALL( tit, targets ) { SdfPath targetPath( tit->GetAssetPath( ) ); GfVec3d translation; const UsdPrim& target = stage->GetPrimAtPath( targetPath ); target.GetAttribute( TfToken( "xformOp:translate" ) ).Get( &translation ); std::pair<SdfPath, GfVec3d> translationPair = std::pair<SdfPath, GfVec3d>( targetPath, translation ); _initialTranslationMap.insert( translationPair ); } } UsdPrim UsdRigImagingConstraintAdapter::_GetConstraintTarget( const UsdRigConstraint& constraint ) { SdfAssetPath constraintTargetPath; constraint.GetTargetAttr( ).Get( &constraintTargetPath ); return _GetPrimAtPath( constraint, SdfPath( constraintTargetPath.GetAssetPath( ) ) ); } UsdPrim UsdRigImagingConstraintAdapter::_GetTargetAtIndex( const UsdRigConstraint& constraint, int constraintIndex ) { VtArray<SdfAssetPath> targets; constraint.GetTargetsAttr( ).Get( &targets ); return _GetPrimAtPath( constraint, SdfPath( targets[constraintIndex].GetAssetPath( ) ) ); } UsdPrim UsdRigImagingConstraintAdapter::_GetPrimAtPath( const UsdRigConstraint& constraint, const SdfPath& path ) { UsdStageWeakPtr& stage = constraint.GetPrim( ).GetStage( ); return stage->GetPrimAtPath( path ); } float UsdRigImagingConstraintAdapter::_GetWeightAtIndex( const UsdRigConstraint& constraint, int constraintIndex ) { VtArray<float> weights; constraint.GetWeightsAttr( ).Get( &weights ); float weight = weights[constraintIndex]; weight = weight / weights.size( ); return weight; }

    在内部的一个测试场景中,我们针对pPipe物体做出了平移变换,被约束的物体也同步地变换。

    对USD的二次开发感兴趣?或者是想要让你的三维软件添加USD的导入导出支持?可以找我们,我们研究USD很深入哦。
    上海USD研究小组

    read more

关注我们

微博
QQ群